移动设备的媒体查询 - 宽度不正确答案

【问题标题】：Media queries for mobile - widths incorrect移动设备的媒体查询 - 宽度不正确
【发布时间】：2013-04-15 11:53:46
【问题描述】：

我一直在开发一个响应式网站。我一直在使用 Chrome 开发人员工具将屏幕尺寸覆盖为 320 像素，并使用媒体查询来更改 CSS。这是我使用的媒体查询：

@media only screen 
and (max-width : 480px) {

在我的浏览器上它可以正常工作，我得到了这个（将视口设置为 320 x 480px）：

但是在 iPhone 5 上查看是这个结果，和全宽版一样]2:

您可以查看完整的媒体查询 CSS here

【问题讨论】：

【解决方案1】：

添加这个

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

在您的<head> 标签中。

这意味着您的网站将缩放到设备宽度而不是默认宽度。

【讨论】：