iphone - 縦向きのすべてのスマートフォンのクエリ

Question

私が達成しようとしているのは、縦向きのすべてのスマートフォンでのみ機能するメディアクエリです

今まで使っていたのですが、iPhone 5 では動かないのですが、なぜでしょうか?

@media only screen and (max-width:800px) and (orientation: portrait){
    aside{ display: none;}
}

score 0 · Accepted Answer

iPhone 5 のディスプレイ解像度は 1136 x 640 ピクセルです。対角 4 インチの新しいタッチスクリーンのアスペクト比は 16:9 で、326 ppi (ピクセル/インチ) の Retina ディスプレイを採用しています。

試す：

@media only screen and (min-width: 560px) and (max-device-width: 1136px) {
   aside{ display: none;}
}

score 0 · Accepted Answer

縦向きのすべてのモバイル画面:

CSS で:

@media only screen and (max-device-aspect-ratio: 1) and (orientation: portrait) {
     aside{ display: none;}
}

ビューポート幅が明示的に設定された縦向きの小さなモバイル画面:

このスケーリングモードを HTML で宣言する<head>

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

CSS で:

@media only screen and (max-width: 479px) and (max-device-aspect-ratio: 1) and (orientation: portrait) {
     aside{ display: none;}
}

デフォルトのビューポート幅 (980px) の縦向きのすべてのモバイル画面:

注: 最近の Web デザインでは、ビューポートの幅をデフォルトの 980px のままにするのではなく、定義することが標準的な方法になっています。レスポンシブデザインに不可欠です。時間をかけてそれについて学ぶことを強くお勧めします。

CSS で:

@media only screen and (width: 980px) and (max-device-aspect-ratio: 1) and (orientation: portrait) {
     aside{ display: none;}
}

2 に答える 2