css - css メディア クエリの最大デバイス幅

Question

max-device-width の css 3 メディア クエリがある場合、デバイスの向きが変わるとこれは変わりますか?

たとえば、iPhone が縦向きから横向きになった場合、max-device-width は変わりますか?

Answer 1

これは、iPhone、iPad などの他のデバイスとは異なります。Apple 製品ではdevice-width値は同じままですが、他のデバイスで方向を変更すると、別のルールが適用される可能性があります。

これを行う最も信頼できる方法は、 / の代わりに / を使用minするmax-widthことminですmax-device-width。これらはビューポートのサイズに依存し、デバイス間で一貫しています。

Answer 2

向きを変えない

@media screen and (orientation:portrait) {
/* Portrait styles */
}
@media screen and (orientation:landscape) {
/* Landscape styles */
}