【发布时间】：2013-12-07 03:33:20
【问题描述】：
我有以下 Meta 标签
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
和 CSS 规则
@media all and (max-device-width: 640px) { ... }
@media all and (max-device-width: 480px) { ... }
当我在手机上通过 Chrome 打开网站时，一切正常 - 使用了 max-device-width: 480px 规则。但是当我通过 Android 4 默认浏览器打开站点时，它使用 max-device-width: 640px 规则。你能解释一下这种行为吗？
【问题讨论】：
-
你试过用
max-width代替max-device-width吗？ -
使用
max-width它可以按预期工作。但是当用户更改浏览器窗口的大小时，我们不想显示移动设计。所以我们使用max-device-width -
您是指PC上的浏览器窗口大小？
-
是的，我们对所有设备使用相同的 html/css。所以PC用户可以改变浏览器的宽度。当浏览器窗口宽度很小时，将显示移动设计，这对我们的客户不利
-
你不能假设 99.9% 的 PC 屏幕至少 1024px吗？
标签： android css responsive-design android-4.2-jelly-bean