視口元標記在Android上無法正常工作

Question

我製作了響應式網站，並使用視口元標記修復了不同設備上的縮放比例。我還用JavaScript來告訴設備不低於規模525px，因爲這是我的身體元素的最小寬度：

<meta id="myViewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" /> 

window.onload = function() { 
    if(window.innerWidth <= 525) { 
     var mvp = document.getElementById('myViewport'); 
     mvp.setAttribute('content','width=525'); 
    } 
} 

這工作完全在我測試了幾乎所有的設備;尤其適用於iOS移動設備（iPhone/iPad）。該網站是完全縮放的，一切都適合在屏幕內，並且用戶不需要水平滾動，放大或縮小。

但是，在Android設備上查看網站時，它不符合預期的屏幕。爲確保所有內容適合屏幕，用戶必須稍微縮小。這推斷視口在Android設備上無法正常工作。任何想法爲什麼？

我基本上希望網站能夠加載到每個設備上，並且完全適合屏幕，所以用戶不需要縮小內容以適應內容。

的鏈接網址是：www.wyevalleycampers.com/Version2/

Answer 1

當網頁內容比設備更廣泛的視口，Chrome會加載頁面完全縮小，使所有的內容是可見的。

你已經超出了你的案例瀏覽器的限制。如果window.innerWidth < = 525，用戶設備的視口寬度小於525px。然後你告訴瀏覽器渲染一個525px寬的佈局。由於您已將最小和初始比例設置爲1，因此瀏覽器無法縮小以顯示所有內容。它需要縮小，因爲在scale = 1時，視口比內容寬度小。刪除初始和最小量程應該有所幫助。

蘋果最近停止了尊重視口元標記user-scalable屬性，我猜他們可能不尊重minimum-scale出於同樣的原因。