3

モバイルデバイス（特にiPadとiPhone）をターゲットにしようとしていますが、CSS3メディアクエリを使用すると、ラップトップなど、同じ解像度の他のデバイスに同じスタイルが追加されます。他の非モバイルデバイスにも追加せずに、モバイルデバイス固有のスタイルを追加するにはどうすればよいですか？

これまでのところ、これを使用しています。これにより、方向セレクターを使用している場合でも、幅が1024px以下のすべてのデバイスにcssが追加されます。

@media only screen and (min-device-width: 320px) and (orientation:portrait),
                       (max-device-width: 1024px) and (orientation:landscape){
           // Do something
}

編集： 興味のある人のために、私はメディアクエリを複製するだけでこれを機能させることができましたが、複製をわずかに変更しました。これは、これを行うための最も効率的な方法ですが、主なことはそれが機能することです。

@media only screen and (min-device-width: 320px) and (orientation:portrait),
                   (max-device-width: 1024px) and (orientation:landscape){
       // some styling
}

@media only screen and (min-device-width: 320px) and (orientation:portrait),
                   (max-device-width: 768px) and (orientation:portrait){
       // some styling
}
4

3 に答える 3

1

セクション「7.3 認識されたメディアタイプ」で、これを見ると役立つかもしれません。

于 2012-04-11T08:53:45.180 に答える
1

はい:デスクトップ ブラウザもorientationメディア クエリをサポートしています。

デバイスが iPad なのか iPhone なのかを検出する方法がメディア クエリによって提供されるとは思えません。デバイスを識別するのではなく、デバイスの機能 (幅や向きなど) を調べることができます。

あなたのスタイルが iPad 以外のデバイスに不適切である理由は何ですか?

于 2012-04-11T09:14:41.723 に答える
0

必要なのは、編集の 2 番目のメディア クエリだけであることがわかりました。

@media only screen and (min-device-width: 320px) and (orientation: portrait),
   (max-device-width: 768px) and (orientation: portrait) {
   // some styling
}

それは魅力のように働きました！

于 2015-08-27T00:28:36.703 に答える