css max-width 如何在移动设备上工作？答案

【问题标题】：How does css max-width work on mobile devices?css max-width 如何在移动设备上工作？
【发布时间】：2013-10-06 09:07:03
【问题描述】：

我在这里有点困惑 - 我有一个带有以下内容的 css 样式：

@media (max-width: 855px) {
    #page {
        //declarations
    }
}

这在我的桌面上工作正常，当我调整窗口大小时，浏览器会设置样式，因为它是声明的。但是我似乎无法让它在移动设备上运行。在 iphone 4 上进行测试，布局设置不正确。我假设如果 iphone 的显示屏是 640 x 960 像素，它会正常工作。我错过了什么？

【问题讨论】：

【解决方案1】：

尝试将此添加到您的 head 标签中：

<meta name="viewport" content="width=device-width, initial-scale=1">

【讨论】：

【解决方案2】：

在</head> 标签之前使用"viewport" 确保您的元数据

并在您的 CSS 中添加媒体查询

@media（最大宽度：YOUR_WIDTH_VALUE）{

}

【讨论】：