我一直在开发一个网站，目前正在使用媒体查询来提高响应能力。媒体查询完美运行，网站在模拟器中变成移动设备。 （http://mobt.me/2T5i 和 Chrome 的检查元素）。在这两个模拟器上，该站点看起来完全符合我的要求，但是当我在运行 ios8 的 iphone 5 上查看它时，情况就完全不同了。我已经包含了元标记和所有内容，但它在我的手机上仍然表现得很奇怪。我还检查了朋友的电话，同样的事情发生了。您可以查看网站here
这是我手机上的样子：
【问题讨论】：
标签： html css media-queries
出于某种原因，Safari 不会读取您的媒体查询。我不知道为什么，但是试试这种媒体查询：
@media screen and (max-device-width:640px), screen and (max-width:640px) {
/* styles here */
}
提示：有些类在 safari 中效果不佳。
您应该将这些行添加到您的媒体查询中：
@media (max-width: 775px) and (min-width: 500px) {
.item-wrap {
display:none;
}
}
这将隐藏您的桌面菜单（可见：隐藏，不起作用）。
编辑：
嗯，你应该检查你的 head 标签。您正在加载 jquery 之前加载引导程序，请尝试使用以下代码：
<head>
<title>Third Wave Analytics</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="icon" href="../../favicon.ico">
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,400italic,300italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css">
<script>
function scroll(){
$('.btnMedio').click(function(event) {
// Preventing default action of the event
event.preventDefault();
// Getting the height of the document
var n = $('#myCarousel').height() + 20;
$('html, body').animate({ scrollTop: n }, 900);
});
};
$(document).ready(scroll);
</script>
</head>
【讨论】：
display: none; 没有改变任何东西，并且使用 max-device-width 会弄乱桌面和移动设备的导航栏。
<link rel="stylesheet" href="css/style.css"> 到 <link rel="stylesheet" href="css/style.css" type="text/css"> 如果没有，请尝试将type="text/javascript" 添加到所有脚本标签。
Line 11: Delete innecesary } Line 142: Delete innecesary */ Line 159: Type white space betwen media and (max-width... like this -> media (max-width: 780px){ Line 550: Dont forget the white space here: media screen and(max-dev... -> media screen and (max-dev...