Css 在移动设备上切断宽度，调整桌面浏览器的大小

我正在开发一个带有桌面和iPhone4视口的网站。当我进行大部分开发并使用viewport chrome扩展通过桌面浏览器查看时，它的渲染效果很好，看起来也不错。但当我在iPhone4S上查看时，宽度被破坏了。我没有逻辑告诉它这样做。我看不出问题是什么，我想知道是否有人能想到一些可能的问题

桌面（在320视口处）：-----

iPhone 4S：

用于包装整个站点的.container{}类的查询

.container {
 text-align: center;

 margin-left: auto;
 margin-right: auto;
}
@media (min-width : 320px) {
    .container {
        width:75%;
    }
}

---

非常感谢您的帮助。

将此代码用于iphone 4

屏幕宽度在320px到480px之间

.container {
 text-align: center;

 margin-left: auto;
 margin-right: auto;
}
@media and (min-width : 320px) and (max-width : 480px) {
    .container {
        width:75%;
    }
}

---

否则请使用下面的代码我最好的猜测是这与视网膜显示有关。桌面上的视口测量普通显示器上的像素。在4s上，320像素不是全屏，而是640像素。您应该查看设备像素比率查询

此处可能存在两个与您的

.container

无关的问题。我为什么这么想？你的菜单显示得又大又好，但你的其他内容却不是。你说的，容器包裹一切。因此，我们不应该在这里看到差异

因此，您有两个问题可能与此相关：

您的

中可能缺少一些元标记。看起来媒体查询似乎对您有效，但您的比例已下降。尝试添加

你的菜单风格。有固定尺寸的吗？是否有媒体查询正在对其进行调整

如果没有看到菜单的样式，我真的说不出到底是哪里出了问题

.container {
 text-align: center;

 margin-left: auto;
 margin-right: auto;
}
@media (max-width : 320px) {
    .container {
        width:75%;
    }
}