Question

我一直在开发一个网站，目前正在使用媒体查询来提供响应能力。媒体查询工作完美，网站在模拟器中变为移动。（http://mobt.me/2T5i和Chrome的检查元素）。在这两个模拟器上，网站看起来都是我想要的，但是当我在运行ios8的iphone 5上查看它时，它是一个完全不同的故事。我已经包含了元标记和一切，但它仍然在我的手机上表现得很奇怪。我还检查了一个朋友的电话，同样的事情发生了。您可以查看网站here

这就是我手机上的样子：

Answer 1

出于某种原因，safari不会读取您的媒体查询。我不知道为什么，但尝试这种媒体查询：

@media screen and (max-device-width:640px), screen and (max-width:640px) {
    /* styles here */
}

提示：有些课程在野生动物园中效果不佳。

您应该将这些行添加到媒体查询中：

@media (max-width: 775px) and (min-width: 500px) {
 .item-wrap {
  display:none;
 }
}

这将隐藏您的桌面菜单（可见：隐藏，无效）。

编辑：

好吧，你应该检查你的头标签。您在加载jquery之前加载bootstrap，尝试使用以下代码：

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

CSS - 移动网站奇怪的回应？

1 个答案: