我应该使用最大设备宽度还是最大宽度？

Question

使用CSS媒体查询，您可以用于max-device-width定位设备宽度（例如iPhone或Android设备）和/或max-width定位页面宽度的。

如果使用max-device-width，则在更改桌面上浏览器窗口的大小时，CSS不会更改，因为您的桌面不会更改大小。

如果使用max-width，则在更改桌面上浏览器窗口的大小时，可能会显示面向移动的样式，例如触摸友好的元素和菜单等。

现在已不再针对特定的浏览器（和设备？）定位，并且您应该对目标对象有所了解。那也适用于媒体查询吗？

为什么要针对一个目标呢？推荐哪一个？

这是我在生产网站上使用的媒体查询的示例：

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) {  

    /* Change a menu to fit the screen better, etc... */

}

我倾向于同时使用max-device-width和max-width。

Answer 1

避免设备宽度。原因是您不知道用户浏览器如何响应。对于IOS，这似乎很简单，至少对于Safari而言。它似乎是一个与设备方向无关的单个设备宽度响应。此外，设备宽度仅针对设备的较短侧进行说明。我确实在iPhone 4S和iPad上进行了测试。无论面向哪个方向，他们都分别响应了320和768。对于Android，它更加不可预测。我在华为Ascend Y330上测试了六个浏览器（Android默认浏览器，Chrome，Opera，Firefox，Firefox Beta，Dolphin）。响应因浏览器类型和方向而异。我在带有查询的页面上进行了测试（最大设备宽度：*** px），并找出需要填写的px值才能使查询处于真实状态。根据浏览器的类型和方向，需要四个不同的值（320、480、534、800）。这使得设备宽度不可用。