100

I have an AJAX app built for mobile Safari browser that needs to display different types of content.

For some content, I need user-scalable=1 and for other ones, I need user-scalable=0.

Is there a way to modify the value of the content attribute without refreshing the page?

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

3 に答える 3

152

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

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

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

アップデート：

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

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">');
于 2010-11-04T08:27:47.797 に答える
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;");

...しかし、デバイスに合わせて調整し、何時間もいじって頑張ってください...そして私はまだそこにいません！

ソース

于 2011-05-05T18:58:50.557 に答える
5

これはほとんど答えられていますが、私は拡大します...

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

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

于 2016-04-27T15:43:31.873 に答える