媒体查询不适用于iPhone或Android，未完全在桌面上工作

我试图设计一个网站，根据用户的设备来响应地显示桌面版本或移动版本。我更喜欢使用响应式CSS来做到这一点，而不是使用移动重定向。媒体查询不适用于iPhone或Android，未完全在桌面上工作

有问题的网站是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; 
} 

}

来源

2013-02-12 Julia Spangler

尝试使用meta标签，迫使手机浏览器报告它的实际宽度：

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

您也可以禁用变焦时，如果你已经有了一个适当的响应式设计：

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

来源

2013-02-12 20:34:50

谢谢！完美工作！ – 2013-02-13 21:47:34

您需要添加视口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。如果网站默认情况下未将其视口宽度报告为980像素，则网站将在iPhone上呈现该图像。

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

来源

2013-02-12 21:21:40 daGUY

媒体查询不适用于iPhone或Android，未完全在桌面上工作

回答

相关问题