Question

我正在开发一个带有桌面和iPhone 4视口的网站。当我正在进行大量开发并使用视口镀铬扩展程序通过桌面浏览器查看它时，它会很好并且看起来很好。但是当我在iPhone 4s上查看时，宽度已损坏。我没有逻辑告诉它这样做。我不知道问题是什么，想知道是否有人能想到一些可能的问题？

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

enter image description here

iPhone 4S：

enter image description here

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

.container {
 text-align: center;

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

非常感谢你的帮助。

Answer 1

您在这里工作时可能遇到两个与.container无关的问题。为什么我这么想？你的菜单很好很大，但你的其他内容不是很好。你说.container包装一切。所以我们不应该看到那里的差异。

所以，你有两个问题可能与：

有关

您可能在<head>中遗漏了一些元标记。看起来媒体查询似乎对您有用，但您的规模已经过时。尝试添加<meta name="viewport" content="width=device-width, initial-scale=1">
您的菜单样式。他们有一套尺寸吗？是否有正在调整它的媒体查询？

如果没有看到菜单样式，我真的不能说那里到底出了什么问题......

Answer 2

将此代码用于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%;
    }
}

否则使用以下代码为＆lt; 320px widht screen

.container {
 text-align: center;

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

你的错误是，你错误地将min-width : 320px代替max-width : 320px

More...

Answer 3

我最好的猜测是它与Retina显示器有关。桌面上的视口测量普通显示器上的像素。在一个4s 320像素实际上不是全屏 - 而是640.你应该检查设备像素比率查询http://css-tricks.com/snippets/css/retina-display-media-query/

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

3 个答案: