響應網站在模擬器上正常運行，但在實際設備上運行不正確

我構建了一個響應式網站，我希望在移動設備上運行該網站，併爲此我也編寫了媒體查詢。我在這裏給我的html格式：響應網站在模擬器上正常運行，但在實際設備上運行不正確

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta name='viewport' content="width=device-width, initial-scale=1.0"/> 
<meta charset="utf-8"> 
...<!-- meta tags,scripts for mobile devices as well as others--> 
</head> 
<body> 
<div class="home container-fluid"> 
... <!-- my first page--> 
</div> 

<div class="home container-fluid"> 
... <!-- my second page --> 
</div> 
</body> 
</html>

我在HTML中必須做什麼改變？此代碼適用於桌面版本，當我檢查谷歌瀏覽器上的元素時，它看起來適用於所有設備，但在實際移動設備上測試時無法正常工作。假設，我寫了傳媒查詢iphone6加上如下：現在

@media only screen and (min-device-width: 414px) and 
(max-device-height: 736px) and (orientation : landscape) 
{ 
    ...// styles for various classes and ids for landscape of iphone6+ 
} 

@media only screen and (min-device-width: 414px) and 
(max-device-height: 736px) and (orientation : portrait) 
    { 
    ... // styles for portrait mode in iphone6+ 
    }

，如果我檢查由鉻檢查元素和檢查iphone6 +，它看起來正常，但如果我試圖在實際的iPhone 6+則沒有奏效好。我該怎麼做才能讓我的網站在實際設備上正常運行。目前，它只適用於模擬器。

來源

2016-11-25 Maulik

你模擬器看直播的網站或本地開發服務器？確保您的「真實」設備不使用緩存樣式表。如果需要，請使用[CacheBuster]（http://twosixcode.com/notes/view/simple-cache-busting-for-css-and-js）。「那麼效果不好」，請詳細說明這個問題，它根本不起作用嗎？如果它的一部分工作細節沒有按預期工作，以及它有什麼不同。 –

模擬器與真實設備的屏幕截圖/圖片將有所幫助 –

如果您的Android設備安裝了Chrome瀏覽器，則可以通過桌面瀏覽器在真實設備上調試您的網站。使用USB連接你的android手機到你的電腦，檢查'系統設置>開發人員選項> USB調試'，打開網站的鉻，去桌面鉻打開'鉻：//檢查'，你會看到在Android中打開的標籤。 – catssay

更新時間：

您可以訪問此鏈接： http://stephen.io/mediaqueries/

也許這將幫助你..

來源

2016-11-25 04:56:28

我試過@sherly但沒有工作 – Maulik

@Maulik我已經更新我的答案，並給你源代碼鏈接:) –

我做了同樣的鏈接，但在實際設備上它不能工作.. – Maulik

響應網站在模擬器上正常運行，但在實際設備上運行不正確

回答

相關問題