【解像度テスト】
以下はピクセル指定をした時に、実際はどれくらいで画面いっぱいに表示されるかの簡単なテストです。
一番大きいボックスを1920pxで指定していますので、PCでもスマートフォンでも、ほとんどの端末で横スクロールが発生します。
スマートフォンは一般的に解像度が高く、1pxを実際のブラウザ上で何pxとして描画するか(devicePixelRatio:デバイスのピクセル比率)は端末によって変わります。
メディアクエリでは、端末のドット数ではなくこちらのpx数で判別されます。
PCブラウザのように1px=1ドットではありません。
※スマートフォンの方は、
ページの自動調整設定を解除してご覧下さい。
(docomo標準ブラウザの場合:【設定】→【高度な設定】→【ページの自動調整】のチェックを外す)
解除しない状態だと、横スクロールが発生しないようブラウザが自動で幅を調節してしまうので、正確な結果が表示されません。
1920px
1920px
1280px
1280px
1200px
1200px
1080px
1080px
800px
800px
768px
768px
720px
720px
640px
640px
540px
540px
533px
533px
480px
480px
360px
360px
320px
320px
300px
300px