CSS メディアクエリで物理的な画面幅を使用する回避策はありますか? 今日、デスクトップ モニターの解像度を超える電話があります。ただし、電話は引き続きモバイル レイアウトを表示し、デスクトップは標準レイアウトを表示する必要があります。
したがって、以下の例のようなピクセル ベースのクエリに頼ることはできません。代わりに、物理的な測定値、またはピクセル密度に関する測定値が必要です。
@media screen and (min-width: 700px) {
}
私の研究ではそのような測定値は見つかっていないので、存在しない可能性があります。とにかく、この問題は通常どのようにアプローチされますか?
まず、CSS ピクセルは角度の測定値であり、デバイス間で適切に正規化されています。完全ではありませんが、ほとんどの場合、これが問題にならないほど十分です。
個人的には、メディア クエリをems で測定して、フォント サイズに相対的になるようにしています。つまり、人々は通常、Web サイトにあるテキストを読むために Web サイトにアクセスするので、1 行に適切な量の単語が含まれている限り、私は満足しています。
物理的な (デバイスの) 幅で測定するべきではありません。なぜなら、人々は UI 要素がスペースを占有している可能性があるからです (または単にブラウザーを全画面表示で実行していないからです)。
現在、これを確認するための信頼できる方法は存在しないようです。
私は同じ「必要性」を持っています。これは、ピクセルが画面のサイズと組み合わされた表示距離ほど重要ではない場合に発生します。
たとえば、巨大なテレビ セットと同じ解像度の iPad を使用できますが、これら 2 つのデバイスでコンテンツをまったく異なる方法で表示したい場合があります。腕の長さ）。
役立つかもしれないテレビ セットの @media クエリがありますが、現在のサポートはおそらく非常にまばらです。私のGoogle Chrome v32はそれをサポートしています。ここでテストしてください: http://cssmediaqueries.com/