モバイルデバイス(特に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
}