视口元标记在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出于同样的原因。