Question

我正在尝试动态更改<meta name="viewport">。

我默认设置如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

当屏幕分辨率低于768px时，我希望将视口更改为：<meta name="viewport" content="width=768">。

为此，我使用jQ代码：

var winW,
    initVP,
    newVP = "width=768";

$(document).on({
    ready: function(){
        winW = $(window).width();
    }
});

$(window).on({
    load: function(){
        if ( winW < 768 ) { setViewport( newVP ); }
    }
});

function setViewport( content ) {
    $('meta[name=viewport]').attr('content',content);
}

但出于某种原因，这种变化不会以任何可见的方式影响Google Nexus 7的默认浏览器（不是Chrome浏览器，而是之前的蹩脚浏览器）。我可以看到<head>部分进行了更改，<meta name="viewport" content="更改为width=768">，但浏览器似乎没有对此更改做出反应。

有谁能解释一下我在这里做错了什么？

谢谢！

编辑：正如 zsaat14 所提到的，根据规格，Nexus7的宽度为800px。然而，浏览器总是返回600px宽度（请参见此处的屏幕截图）。在我的Android模拟器的情况下，它返回602px虽然％）

Browser alerting $(window).width();

Answer 1

Nexus 7的屏幕分辨率为1280X800（source）。有点令人惊讶的是，元标记正在发生变化，但您的网站保持不变并不奇怪。

编辑：好的，那不是宽度。您可以尝试从MDN中阅读此article，并确保元视口可以执行您期望的操作。目前还不是很清楚你想要它做什么，但是meta视口标签没有做出重大改变，所以你可能会错过它。

Android默认浏览器（不是Chrome）上的Meta Viewport动态更改

1 个答案: