样式表无法在移动设备中正常工作

Question

我的移动设备样式表包含以下代码：

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

但是，它不适用于我的iphone 3gs。当我调整大小时，这个样式表在浏览器中运行良好。

如果我将“max-width”值设置为更大的px数，例如1000px，那么它可以正常工作。 为什么？

Answer 1

确保您有视口元标记。

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

大多数移动浏览器使用视口宽度980px将内容呈现为普通网页。然后，他们挤压渲染的页面以适应浏览器的实际视口。

这就是为什么使用320px的媒体查询不起作用，但1000px无效。