CSS - 手機網站迴應奇怪？

我一直在開發一個網站，目前正在使用媒體查詢來獲得響應。媒體查詢工作完美，網站在模擬器中變爲移動。（http://mobt.me/2T5i和Chrome的檢查元素）。在這兩個模擬器上，網站看起來完全是我想要的，但是當我在運行ios8的iphone 5上查看它時，它是一個完全不同的故事。我已經包含meta標籤和所有內容，但它仍然在我的手機上表現得很怪異。我也檢查了一個朋友的電話，同樣的事情發生。您可以查看網站here CSS - 手機網站迴應奇怪？

這是它看起來像我的手機上：

來源

2014-10-12 Aten

出於某種原因，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; 
} 
}

這將隱藏您的桌面菜單（可見：隱藏，不工作）。

編輯：

那麼，你應該檢查你的頭標籤。負載的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>

來源

2014-10-12 02:17:27

'顯示：無;'沒有任何改變，並使用最大設備寬度搞砸了桌面導航欄以及移動。 – Aten 2014-10-12 02:41:32

它仍然不起作用，bootstrap不應該問題，因爲我沒有使用它。 – Aten 2014-10-12 03:46:49

有時候如果有這樣的錯誤，你可能會遇到問題。 – 2014-10-12 03:50:41

CSS - 手機網站迴應奇怪？

回答

相關問題