Question

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

似乎不正确支持此功能的移动浏览器包括：

Windows phone 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代码后，它仍然将视口保持为设备宽度，而不是我想要实现的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属性添加到任何被卡住但未穿过的内容中。布局视图。希望这对你有所帮助。

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

1 个答案: