web-dev-qa-db-ja.com

Media Queryはスマートフォンの解像度にどのように適用されますか?

1920x1080 pxの解像度を備えた新しいiPhone 6 Plusの発売により、この解像度は、UI開発者がCSSでメディアクエリタグで定義する画面幅とどのように異なるのかと考えました。

たとえば、一般的なブレークポイントは480、768、992などですが、電話が1080p画面の場合、このデバイスでモバイルサイトをどのように表示しますか。技術的には、デスクトップサイトの最も広いバージョンを表示する必要がありますが、モバイルサイトが表示されることは知っています。では、「768より下」のメディアクエリは、1080px幅のデバイス(ポートレート)にどのように適用されますか?

私の携帯電話は4.7インチの画面と解像度540x960px(哀れな、知っている)で、デバイス上で自分のウェブサイトのいくつかをテストしました。レイアウトはchromeコンピューターで幅を約380pxに縮小します。つまり、コンピューターで380pxに表示されるディスプレイのテスト中、デバイスの解像度が540pxの携帯電話と同じになります。

そこで質問は、UI開発者として、Webサイトがどの解像度で表示されるかをどのように予測しますか?質問を十分に明確にしたいと思います。ありがとう

3
VeeK

IPhone 6 plusで表示できる物理ピクセルと画面サイズには違いがあります。画面サイズは、CSSメディアクエリに影響するピクセルサイズです。

IPhone 6 plusの画面サイズは414 x 736ピクセルで、ブラウザのウィンドウサイズはメニュースペースにより少し異なります。

良い説明はここにあります: http://www.kylejlarson.com/blog/2015/iphone-6-screen-size-web-design-tips/

基本的には、iPhone 6 Plusの場合、縦向きの場合は480ピクセル、横向きの場合は768ピクセルのブレークポイントを使用することをお勧めします。

2
Stefan Korn