android - 如何调整视口(viewport)大小和缩放以支持跨浏览器？

Question

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

似乎无法正确支持此功能的移动浏览器是:

• Windows 手机 8 IE10
• Android 原生浏览器
• Android Firefox 浏览器

以下代码行适用于所有移动浏览器，除了像往常一样拒绝标准的公司的浏览器(IE，在本例中为 IE10 Mobile):

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

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

Viewport for IE10 & 11 desktop, but not mobile

应用下面的 css 和 javascript 代码后，它仍然将视口(viewport)保持为设备宽度，而不是我试图实现的 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

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

我至少找到了部分问题的解决方案。视口(viewport)大小现在似乎可以工作，我们得到了正确的比例。看来我仍然必须接受这样一个事实:通过这个解决方案，用户将能够手动缩放页面。

这个答案是从另一个 question 中剥离出来的。 :

尝试像这样渲染视口(viewport)元标记:

    <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 标签)没有在屏幕上流动，因此解决方法是将带有空字符串的背景图像属性添加到任何卡住且不会穿过屏幕的内容中。布局 View 。希望这次对您有所帮助。