Question

我的网页绝对没有«meta»视口标记。

我动态创建了自己的«meta»视口标记：

var viewportMeta = document.createElement('meta');
    viewportMeta.setAttribute('id', 'myMeta');
    viewportMeta.setAttribute('name', 'viewport');
    viewportMeta.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=no');

并将其附加到«head»（在一些用户操作之后）：

document.head.appendChild(viewportMeta);

然后（在用户点击某个按钮后）我需要从«head»中删除“myMeta”«meta»标签：

var myMeta = document.getElementById('myMeta');
document.head.removeChild(myMeta);

它删除，100％！使用桌面浏览器和iPad上的Adobe Edge Inspect Weinre进行检查。

但是整个页面都没有进入之前的状态！整个页面保持不变，就像它有“meta”视口标记，其中包含“viewportMeta”对象中所有已定义的属性。

那么，有没有办法完全删除«meta»视口标签？有什么想法吗？

（此问题出现在iPad的Safari和Chrome浏览器上。试图不删除«meta»标签，只是更改了它的«内容»属性 - 没有成功。未在Android设备和浏览器上进行过检查。）

Answer 1

您应该恢复视口元标记的原始值

<html>
<head>
    <title>test dynamic view port</title>
</head>
<body>
    <button id="turnOn">on</button>
    <button id="turnOff">off</button>

    <script type="text/javascript">

        function turnOnDeviceViewport() {

            removeMetaIfExist();

            var viewportMeta = document.createElement('meta');
            viewportMeta.setAttribute('id', 'myMeta');
            viewportMeta.setAttribute('name', 'viewport');
            viewportMeta.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=no');

            document.head.appendChild(viewportMeta);
            alert("click");
        }

        function turnOffDeviceViewport() {

            removeMetaIfExist();

            var viewportMeta = document.createElement('meta');
            viewportMeta.setAttribute('id', 'myMeta');
            viewportMeta.setAttribute('name', 'viewport');
            viewportMeta.setAttribute('content', 'width=980, user-scalable=yes');

            document.head.appendChild(viewportMeta);
            alert("click");
        }

        function removeMetaIfExist() {

            var metaElement = document.getElementById("myMeta");
            if (metaElement) document.head.removeChild(metaElement);
            alert("removed");
        }

        document.getElementById("turnOn").addEventListener("click", turnOnDeviceViewport, false);
        document.getElementById("turnOff").addEventListener("click", turnOffDeviceViewport, false);

    </script>
</body>

您可以在Apple的开发者网站上找到有关viewport meta默认值的详细信息： Safari HTML Reference: Supported Meta Tags

编辑：默认视口值“width = 980，user-scalable = yes”可能与所有设备和浏览器不同，因此对于完整的解决方案，您需要识别浏览器正在运行并相应地设置默认值

视口元标记删除bug

1 个答案: