0

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

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

在此处输入图像描述

iPhone 4S：

在此处输入图像描述

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

.container {
 text-align: center;

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

非常感谢您的帮助。

4

3 回答 3

1

您在这里可能遇到两个与您的.container. 为什么我会这样想？您的菜单显示得很好而且很大，但您的其他内容却没有。你说 .container 包装了一切。所以我们不应该在那里看到差异。

因此，您的两个问题可能与：

  1. 您可能在<head>. 看起来媒体查询似乎对您有用，但您的规模已关闭。尝试添加<meta name="viewport" content="width=device-width, initial-scale=1">
  2. 您的菜单样式。他们有固定的尺寸吗？是否有正在调整它的媒体查询？

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

于 2013-07-19T13:10:06.643 回答
0

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

否则将以下代码用于 <320px 宽屏幕

.container {
 text-align: center;

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

而你的错误是，你错误地把min-width : 320px而不是max-width : 320px

更多的...

于 2013-07-19T11:04:18.597 回答
0

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

于 2013-07-19T11:05:41.000 回答