1

我正在尝试设计一个网站，该网站将根据用户的设备响应地显示桌面版本或移动版本。我更喜欢使用响应式 CSS 而不是移动重定向。

有问题的网站是http://www.raceweekend.com。当浏览器窗口调整为移动宽度时，应该会发生以下情况：

  1. 水平菜单应在红色矩形块中变为垂直
  2. 旋转的图像应该消失
  3. 徽标应位于顶部居中
  4. 日期（徽标旁边）应该消失

CSS 在 IE9 和 Firefox 中的行为完全符合我的要求。当我将窗口调整为足够窄时，上述所有项目都会发生。

在移动设备上，它只显示常规浏览器版本；上述情况均未发生。我在 iPhone 4 和三星 Galaxy Nexus 上进行了测试。

这是我的媒体查询代码：

@media handheld, screen and (max-width: 480px) {
#nav-bar {
    display:none;
}

#header {
    height:auto !important;
    width:100% !important;
}

#nav {
    height:auto !important;
}

.main-nav li {
    float:none !important;
    clear:both;
    background-color:#cf171f;
    margin-bottom:1px !important;
    padding:0 !important;
}

.main-nav li a{
    display:block;
    padding:10px 18px;
}

.main-nav li a:hover{
    background-color:#be161d;
    color:#ffffff !important;
}

#date {
    display:none;
}

#race-logo {
    width: 100% !important;
}

.center {
    margin: 0px auto;
    display: block;
}

#content, #content-sliders {
    margin-left:5% !important;
    width: 90% !important;
    padding-top:20px !important;
}

#footer {
    font-size:14px !important;
    line-height:1.5em;
}

}
4

2 回答 2

6

尝试使用元标记来强制移动浏览器报告它的实际宽度：

<meta name="viewport" content="width=device-width" />

如果您有适当的响应式设计，您也可以禁用缩放：

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
于 2013-02-12T20:34:50.537 回答
0

您需要将视口meta标签添加到您的 HTML：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

默认情况下，iPhone 实际上会将站点渲染为视口为 980px 宽，然后将其缩小以适合其实际宽度。这是因为 iPhone 的真实视口宽度是 480 像素（iPhone 3GS 或更早版本上的字面值 480 像素，或者双分辨率 iPhone 4 视网膜显示器上的“逻辑”480 像素），所以如果它不这样做，你d 只能看到您访问的每个站点的 480 像素宽的切片。

迷茫了吗？例如，在桌面浏览器上访问 NYTimes.com，然后将窗口大小调整为 480 像素宽。如果默认情况下没有将其视口宽度报告为 980 像素，这就是该网站在 iPhone 上呈现的方式。

无论如何，这就是您的媒体查询不起作用的原因。因此，添加上述meta标签将告诉 iPhone 将其宽度报告为其实际宽度（480 像素），然后将匹配您的媒体查询中的条件。

于 2013-02-12T21:21:40.787 回答