Question

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

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

水平菜单应在红色矩形块中垂直
旋转图像应该消失
徽标应位于顶部
日期（徽标旁边）应该消失

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;
}

}

Answer 1

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

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

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

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

Answer 2

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

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

默认情况下，iPhone实际上会渲染网站as if its viewport were 980px wide，然后缩小以适应其实际宽度。这是因为iPhone的真实视口宽度为480px（在iPhone 3GS或更早版本上为480px，在双分辨率iPhone 4视网膜显示器上为“逻辑”480px），因此，如果它没有这样做，那么' d只能看到你访问过的每个网站的480px宽的片段。

困惑了吗？例如，在桌面浏览器上转到NYTimes.com并将窗口调整为480px宽。如果默认情况下它的视口宽度不会报告为980px，那么该网站将在iPhone上呈现的方式。

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

媒体查询无法在iPhone或Android上运行，也无法在桌面上完全正常工作

2 个答案: