第一次訪問時移動Chrome中有時會忽略HTML視口標記

Question

對於我的自適應網站，我使用視口元標記強制設備以「首選」屏幕分辨率顯示頁面（不是實際的設備分辨率，而是「最小的「初始分辨率爲1.0）。

視窗meta標籤：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0"> 

這似乎在所有設備上很好地工作，但是，移動版Chrome上，有時在iOS設備上，第一/未緩存訪問未檢測到設備的「首選」的決議但溝通實際的屏幕分辨率。

設置重現錯誤（在頁面的頭部分）：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0"> 
<script type="text/javascript"> 
    alert(window.innerWidth); 
</script> 

首先/未緩存的訪問將顯示「980」爲我的Nexus 5，第二次訪問/刷新會顯示所需「 360" 。

有沒有人知道一種方法來強制窗口使用初始縮放，沒有JavaScript超時或窗口onload解決方法？

---

被修改：的window.onload後檢查window.innerWidth返回期望的 「優選的」 寬度。這是我現在的解決辦法...

Answer 1

我找到了一個解決方案：window.innerWidth是某種延遲和的一個早期階段返回不視口調整大小文件寬度值頁面加載。 document.documentElement.clientWidth在計算頁面加載階段的提前窗口寬度時似乎沒有問題。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0"> 
<script type="text/javascript"> 
    // So use this to calculate device width rules before window.onload 
    alert(document.documentElement.clientWidth); 
</script> 

注：您可以稍後使用window.innerWidth，例如在window.onload之後。