GoogleChromeで、スマホ・PC・タブレット、複数デバイスチェック

GoogleChromeの機能「要素を見る」を長年便利に使っていましたが、いつの間にか、進化してました。

１つのブラウザで、iPhoneやiPadはもちろん、Kindleや、Blackbery、Nexus、その他ほぼ全部のスマホや、タブレットを網羅していて、それに切り替えて確認ができることを発見しました。

気がつくまでにかなり時間かかってしまったので、ここで詳しい使い方を紹介します。

①GoogleChromeで、webを表示します

②調べたい場所の上にマウスをおいて、右クリック⇒要素を検証

③左にHTMLコードが出て、右側に、それに対応するスタイルシートが出ます

④このマークを押します

⑤ここの▼をClickすると、いろんなデバイスに切り替える窓が出て来ます

iPhone5を選んでみました

マホ対応しているブログサイトを、iPadminiにて表示させてみました。

http://fireside-essay.jp/

GoogleNexus5で表示させてみました

変わらない場合はブラウザを更新（リロード）してみてください

iPadminiで表示させてみました。PCサイトが表示されます。

アイコンが、指の大きさに変わって芸が細かいです。

つまり、ボタンなどの大きさが押しやすいかどうかも、わかるということ・・？

黄色いバーに忠告が出ている時は、ブラウザを更新した方がちゃんとした結果が出てくるようです。

ブログの記事をiPhone5で表示したところです。

http://fireside-essay.jp/sherpa/country/88.html

横向きにするとちゃんと画像が、左右いっぱいの幅になるように調整されているか・・・確認できます。