如何为跨浏览器支持进行视口大小调整和缩放？

Question

基本上我要做的是让我的视口宽度在所有移动浏览器上都相同，并确保用户无法放大或缩小（缩放）。

似乎没有正确支持此功能的移动浏览器是：

• Windows 手机 8 IE10
• Android 原生浏览器
• 安卓火狐浏览器

以下代码行适用于所有移动浏览器，除了来自公司的那种像往常一样拒绝标准的公司（IE，在本例中为 IE10 Mobile）：

<meta name="viewport" content="width=620, user-scalable=no" />

我发现这个问题的答案已被接受：

Viewport for IE10 & 11 desktop, but not mobile

应用下面的 css 和 javascript 代码后，它仍然将视口保持为设备宽度，而不是我试图实现的 620。

CSS：

@-webkit-viewport   { width: 620; }
@-moz-viewport      { width: 620; }
@-ms-viewport       { width: 620; }
@-o-viewport        { width: 620; }
@viewport           { width: 620; }

Javascript：

$(function(){
    if (navigator.userAgent.match(/IEMobile\/10\.0/) || navigator.userAgent.match(/IEMobile\/11\.0/)) {
      var msViewportStyle = document.createElement("style")
        msViewportStyle.appendChild(
        document.createTextNode(
          "@-ms-viewport{width:auto!important}"
        )
      )
      document.getElementsByTagName("head")[0].appendChild(msViewportStyle)
    }

    alert($(window).width());
});

Answer 1

当我发现其他浏览器也有这个问题时，我能够在互联网上找到更好的结果。

我已经找到了至少部分问题的解决方案。视口大小现在似乎起作用了，我们得到了正确的比例。看来我仍然必须接受这样一个事实，即使用此解决方案，用户将能够手动缩放页面。

这个答案是从另一个 question 中删除的：

尝试像这样渲染视口元标记：

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

设置缩放设置将限制用户缩放的距离，因此如果您将初始值和最大值设置为相同的量，这应该可以解决问题。

更新：通过设置以下内容，我能够一起修复我的 Android 设备错误：

<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />

我还注意到某些内容，例如 p 标签没有在屏幕上流动，因此解决方法是将带有空字符串的 background-image 属性添加到任何被卡住并且没有穿过屏幕的内容中布局视图。希望这次对您有所帮助。