4

我的网页绝对没有“元”视口标签。

我已经动态创建了自己的 «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 上的 Adob​​e Edge Inspect Weinre 检查。

但是整个页面并没有回到以前的状态！整个页面保持不变，就像它在“viewportMeta”对象中具有所有已定义属性的«meta»视口标签。

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

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

4

1 回答 1

4

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

<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 的开发者网站上找到有关视口元默认值的详细信息： Safari HTML 参考：支持的元标记

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

于 2013-05-29T13:56:08.450 回答