Chromeで色々なスマホ表示

Google Chromeを使って、いろんなスマホでの表示を調べてみることができます。

まずは、ソースコード表示して見て下さい。ソースコードを見るには、画面で右クリックして「検証」を選択するとWebサイトのソースコードを見ることができます。ショートキーは「Ctrl + Shift + C」で開きます。あるいは「F12」でソースコードを表示できます。

そして、ソースコードの左上にマウスを当てると「Toggle device toolbar Ctlr+Shift+M」というのがあります。これをクリックすると、左の画像のTopの左に「Responsive」というタグが表示されます。

すると、左側のTopにスマホでの見え方が表示されます。
スマホと言っても種類は多く、Garaxy 、iPad 、Nexus 、iPhone 、iPads、そのほか「Edit」をクリックすると、確認したいスマートフォンの機種を増やすことができます。Kindle 、Blackberry などいろいろなデバイスが選択できます。もちろん「Toggle device toolbar Ctlr+Shift+M」を再度押せば、横巾100%表示もできます。

Responsive でのソースコードを確認するには、これは非常に便利です。もちろんスマホ表示のまま、ページ遷移したり、スクリーンショットで撮影したりできます。Google Chromeに、以前にはなかった機能が盛り沢山です。上手く使いたいですね。

%d人のブロガーが「いいね」をつけました。
%d人のブロガーが「いいね」をつけました。