css 媒体查询最大设备宽度答案

【问题标题】：css media query max-device-widthcss 媒体查询最大设备宽度
【发布时间】：2012-12-12 08:46:06
【问题描述】：

如果我有 max-device-width 的 css 3 媒体查询，当设备的方向改变时，这会改变吗？

例如，如果 iPhone 从纵向变为横向，max-device-width 会发生变化吗？

【问题讨论】：

【解决方案1】：

这不同于 iPhone、iPad 等其他设备。对于 Apple 产品，device-width 值保持不变，但在其他设备更改方向时可能会导致应用替代规则。

最可靠的方法是使用min/max-width 而不是min/max-device-width。这些取决于视口的大小，并且跨设备保持一致。

【讨论】：

您是否认为 max-device-width 在其他平台上不可靠并且建议不要使用它？这些信息的来源是什么？
@ChrisMuench 我是说max-device-width 在查看方向变化时在设备间不一致。对于 iPad、iPhone 等，方向更改不会影响device-width，而对于其他设备则是这种情况。我的来源是经验，如果您制作页面并尝试在 iPad 和 Kindle 上更改方向，您可以自己测试。
知道了，这也是我理解设备宽度的方式。无论方向如何，它都是一个常数，但在设备之间有所不同。
@ChrisMuench 我想我可能有点误解了。 device-width 仅在 iPad、iPhone 上是常量。无论您使用哪种方式转动 Apple 设备，device-width 都是一样的。但是，在其他设备上，当您更改设备的方向时，它会发生变化。

【解决方案2】：

它不会改变方向

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

【讨论】：

viewport 元标记中 device-width 的有用之处在于，它会在用户更改智能手机或平板电脑的方向时更新。 Google Webmaster Central