web-dev-qa-db-ja.com

モバイルサファリのビューポートメタタグをその場で変更できますか？

さまざまな種類のコンテンツを表示する必要があるモバイル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;" />
javascriptmobile-safariviewport
93
Pepper

私はこれが少し古いことを理解していますが、はい、それはできます。始めるための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">');
140
markquezada

あなたの<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;");

...しかし、あなたのデバイスのためにそれを微調整し、何時間もいじって...

ソース

7
sonjz

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

ステップ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);

ステップ

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

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

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

4
posit labs