1

iPad の第 4 世代で Web サイトをテストしており、そのピクセル サイズは 2048px x 1536px ですが、768px 以下の「モバイル」メディア クエリ (縦表示) をアクティブにし、「タブレット」メディア クエリ ( 769px と 1024px です。

なぜこれを行うのか興味がありますか？

私は頭の中でこのメタタグを使用しています。これがこれを行っている理由だと確信しています。

<meta name="viewport" content="width=device-width, initial-scale=1"/>

<link href="mobile.css" type="text/css" rel="stylesheet" media="screen and (min-width: 0) and (max-width: 768px)" />
<link href="tablet.css" type="text/css" rel="stylesheet" media="screen and (min-width: 769px) and (max-width: 1024px)" />

文句を言っているわけではありません。これが適切な方法だと思います。なぜそれが機能するのか混乱していますか？1536pxを768pxにする魔法とは？

4

1 に答える 1

2

Retina の iPad と iPhone は、実際よりもピクセル数が少ないふりをしています。

CSS ピクセルからディスプレイ ピクセルへの 1:1 マッピングは必ずしも存在しません。詳細については、ピクセルはピクセルではありません、および W3C ドキュメントEM、PX、PT、CM、IN... を参照してください。より公式な情報源のために。

于 2014-04-17T09:21:08.480 に答える