したがって、次のような状況があります: $iphone : 320px (max-height 568px); これはiphoneの寸法です。ただし、ブラウザのサイズをこれらの正確な値に変更すると、メディア クエリが機能しなくなります。ブラウザ拡張機能を使用して表示サイズを確認して、これの代わりにビューポートを入力すると機能します。デバイスの幅と高さ、またはビューポートを使用する必要がありますか? ビューポートを使用するのは奇妙に思えます。
ブレークポイントの変数の例を次に示します。「デバイス」を追加して問題を解決していますか? それらすべてに「デバイス」を追加する必要がありますか?
/* モトローラ RAZR V8 (240 x 320) */
$motorola-portrait : 240px (最大デバイス高さ 320px);
/* ブラックベリー 8300 (320 x 240) */
$blackberry-portrait : 320px (最大デバイス高さ 240px);
/* iphone 3-4 (320 x 480) */
$iphone4-portrait : 320px (最大デバイス高さ 480px);
/* iPhone 5 (320 x 568) */
$iphone5-portrait : 320px (最大デバイス高さ 568px);
/* サムスン Galaxy S3/S4 (360 x 640) */
$samsunggalaxy-portrait : 360px (最大デバイス高さ 640px);