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 */
}