4

私の Web ページには «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 の 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 の開発者向け Web サイト: Safari HTML リファレンス: サポートされているメタ タグを参照してください。

編集:ビューポートのデフォルト値 "width=980, user-scalable=yes" は、すべてのデバイスとブラウザーで同じではない可能性があるため、完全なソリューションを得るには、実行しているブラウザーを特定し、それに応じてデフォルト値を設定する必要があります。

于 2013-05-29T13:56:08.450 に答える