4

iOS用のWebページでズームレベルをリセットする方法を理解しようとしています。ユーザーがピンチズームイン/ズームアウトを行うと、ズーム機能が機能しなくなったようです。ピンチジェスチャが必要ですが、プログラムでズームをリセットしたいと思います。Javascript / jQueryを使用してズームを動的に変更するアイデアはありますか？


<meta id="viewportMeta" name="viewport" content="user-scalable=1, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5" />


$（document）.ready（function（）{
      $（ "＃zoomOut"）。click（function（）{
            $（'meta [name = viewport]'）。attr（'content'、'initial-scale = 0.5; maximum-scale1; user-scalable = 1;'）;
        }）;

      $（ "＃zoomIn"）。click（function（）{
             $（'meta [name = viewport]'）。attr（'content'、'initial-scale = 1; maximum-scale = 1.0; user-scalable = 1;'）;
        }）;
}）;
4

1 に答える 1

16

- - - アップデート - - -

これは、iOS7 ではもう問題ではありません。そして、iOS6 で動作する github scottjehl/iOS-Orientationchange-Fix のScott Jehl によるより良い修正があります。

------ 元の回答 ------

これらから答えを得る：

Jeremy Keith ( @adactio ) は、彼のブログOrientation and scaleで、これに対する適切な解決策を紹介しています。

マークアップに最大縮尺を設定しないことで、マークアップをスケーラブルに保ちます。

<meta name="viewport" content="width=device-width, initial-scale=1">

次に、このスクリプトを使用してスケーラビリティを再度許可するときに、ジェスチャ開始までロード時に JavaScript を使用してスケーラビリティを無効にします。

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}
于 2013-01-10T02:32:03.627 に答える