1

ブートストラップを使用してクライアントのサイトを構築していますが、両方のビューポートに特定のスタイルを追加するために、モバイルで横向きと縦向きをターゲットにしようとすると行き詰まりました。モバイル スタイルの縦向きと横向きをターゲットにするにはどうすればよいですか? 320px ブレークポイントに特定のスタイルを追加し、480px ブレークポイントに特定のスタイルを追加する必要があります。私の現在のメディアクエリでは、これは機能していません現在私のスタイルシートには次のものがあります:

/* portrait phones */
@media only screen and (max-width: 320px) and (orientation:portrait) {
    /* Styles */
}

/* landscape phones */
@media only screen and (min-width: 321px) and (orientation:landscape) {
/* Styles */
    }

ランドスケープにスタイルを入れたとしても、それらが取り上げられているとは思いません。変更を加えてから Iphone を更新するたびに、違いはわかりません。私のメディアクエリが間違っているのではないかと考えています。モバイル状態をターゲットにするより良い方法があれば、助けていただければ幸いです。

4

2 に答える 2

1

最終的に、321px メディア クエリに最大幅を追加することでこの問題を解決し、横向きと縦向きの両方のモバイル方向をターゲットにすることができました。私が持っていたヘッダーにも見つかりました:initial-scale=1これは問題を引き起こしているようで、それを削除した後、必要なモバイルブレークポイントをターゲットにすることができました。

/*Portrait phones */
@media (max-width:320px){}

/* Landscape phones and down */
@media (min-width: 321px) and (max-width: 480px) {}
于 2016-12-23T11:39:47.350 に答える