モバイルサファリのオンザフライでビューポートメタタグを変更できますか?


98

さまざまなタイプのコンテンツを表示する必要があるモバイルSafariブラウザー用に構築されたAJAXアプリがあります。

一部のコンテンツには私が必要user-scalable=1、他のコンテンツには私が必要user-scalable=0です。

ページを更新せずにコンテンツ属性の値を変更する方法はありますか?

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

回答:


148

これは少し古いと思いますが、可能です。あなたが始めるためのいくつかのJavaScript:

viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');

必要なパーツを変更するだけで、Mobile Safariは新しい設定を尊重します。

更新:

ソースにメタビューポートタグがない場合は、次のように直接追加できます。

var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
document.getElementsByTagName('head')[0].appendChild(metaTag);

または、jQueryを使用している場合:

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">');

2
いいね!残念ながら、私はそれを機能させることができないようです。私の状況は少し異なります。幅980ピクセルのサイトで作業しています。コンテンツはデザインの端まで行き渡るので、iPadでは見苦しいように見えます。私はビューポートを1020pxの幅に設定して、両側に20pxのマージンを確保しようと思ったのですが...運が悪かったです:( viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'width=1020'); あるコンテキストの場合のみ:これを多少ロックダウンされたDrupalインスタンスに入れています...したがって、ヘッドエリアに直接アクセスできず、Javascriptを使用する必要があります)
Sam

7
これは十分簡単なはずです。直接書いてください。jQueryを使用している場合は、次のようになります。$('head').append('<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">'); または、jQueryがない場合:document.getElementsByTagName('head')[0].appendChild( ... );
markquezada

3
コンテンツ属性については、モバイルサファリのWebインスペクターがセミコロンでエラーをスローしています。これはより有効なようです:viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
jfroom '24

1
@the_nutsそうです、appendChildは文字列ではなくノードを想定しています。更新しました。ありがとう。
markquezada 2015年

1
@basZero:上記のコードを実行する前に、ユーザーエージェントを使用してスクリプトが実行されているデバイスを確認することもできますが、一般的にはそれは悪い考えだと思います。実際のデバイスではなく、デバイスの機能(または必要に応じて画面サイズ)に基づいて一般化してください。たとえば、デバイスがタッチイベントなどをサポートしているかどうかを検出できます(つまり、modernizrを使用)。何をしようとしているかに依存します。
markquezada 2015

8

あなたの <head>

<meta id="viewport"
      name="viewport"
      content="width=1024, height=768, initial-scale=0, minimum-scale=0.25" />

あなたのJavaScriptのどこかに

document.getElementById("viewport").setAttribute("content",
      "initial-scale=0.5; maximum-scale=1.0; user-scalable=0;");

...しかし、デバイス用に微調整したり、何時間もいじったりして頑張ってください...そして、私はまだそこにはいません!

ソース


4

これはほとんどの部分で回答されていますが、私は拡大します...

ステップ1

私の目標は、特定の時間にズームを有効にし、他の時間には無効にすることでした。

// enable pinch zoom
var $viewport = $('head meta[name="viewport"]');    
$viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=4');

// ...later...

// disable pinch zoom
$viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no');

ステップ2

ビューポートタグは更新されますが、ピンチズームはまだアクティブです!! ページに変更を反映させる方法を見つける必要がありました...

これはハックソリューションですが、体の不透明度を切り替えるとうまくいきます。これを達成する他の方法があると確信していますが、ここで私のために働いたものがあります。

// after updating viewport tag, force the page to pick up changes           
document.body.style.opacity = .9999;
setTimeout(function(){
    document.body.style.opacity = 1;
}, 1);

ステップ3

私の問題はこの時点でほとんど解決されましたが、完全には解決されませんでした。ページに収まるようにいくつかの要素のサイズを変更できるように、ページの現在のズームレベルを知る必要がありました(マップマーカーを考えてみてください)。

// check zoom level during user interaction, or on animation frame
var currentZoom = $document.width() / window.innerWidth;

これが誰かの役に立つことを願っています。解決策を見つける前に、マウスを叩いて数時間過ごしました。


これで私の命は救われましたが、少し問題があります。オーバーレイdivに画像を100%で表示し、モバイルデバイスでズームインすると仮定すると、通常は単に表示を拡大縮小するネイティブブラウザーのズーム実装を使用してズームします。元のファイルを再レンダリングしないエ​​リア。他の側では、私は「幅=装置幅」無効なズーム状態のためを削除した場合、ズームしながら、それは絵の罰金をレンダリングしますが、100%のdivが閉じているときに、私は私の最後のページ位置を失う...
ステファン・ミュラー
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.