Webサイトの各種端末での表示をPC上でチェックする方法

Googleが、Resizerというサービスを公開しました。
これは、指定したURLのサイトをいろいろな画面サイズを指定して見え方を確認することができるものです。

他にも同じような機能が備わったものがあるので、紹介したいと思います。

まず、公開されたばかりのResizer。右上の端末種別ボタンを押すと並べて表示、PC、スマホと切り替えができ、上のルーラのところのサイズをクリックすると画面サイズが変更できるようになっています。

わかりやすい操作感はなかなかいいと思います。

次に、Google Chromeを使った方法（拡張のインストールは不要）。

表示 > 開発/管理 > デベロッパーツールと選択し、デベロッパーツールを開いて、スマホアイコンのボタン（コードが表示されている上のElementsの左にあるボタン）を押すと、デバイスモードというモードに入ることができます。

この状態で、普通にデベロッパーツールを使ってCSSやDOMの閲覧、スクリプトのデバッグなどもできますし、デバイスを選んで種類を変えたりサイズを任意に指定したりできます。

これはいいなと思ったのが、Device Pixel Ratioが指定できるところ。2とか3にすることで、等倍表示のPCでもRetina用CSSを使った挙動を確認できます。

最後はSafari。これも標準機能だけでできます。
まず、準備として、環境設定を開き、詳細パネルの「メニューバーに"開発"メニューを表示」をチェックしておきます。

それができたら、開発 > レスポンシブ・デザイン・モードにするを選ぶと、端末を選ぶ画面になります。アイコンが出てるのでChromeよりはなんとなくわかりやすい？

ChromeもSafariも、解像度を変えたらリロードしましょう。そうしないとうまく反映されないことがあります。