1. ホーム
  2. javascript

[解決済み] iPhoneの向きを変えたときに、Webアプリケーションの拡大・縮小をリセットするにはどうしたらいいですか?

2023-01-13 08:09:29

質問

アプリをポートレート モードで起動すると、正常に動作します。その後、横向きに回転させると、拡大されます。 ランドスケープ モード用に正しく拡大するためには、何かを 2 回ダブルタップする必要があります。最初は完全に拡大し (通常のダブルタップ動作)、もう一度完全に縮小します (再度、通常のダブルタップ動作)。 ズームアウトすると、ランドスケープ モード用の正しい NEW スケールにズームアウトされます。

つまり、縦向きに戻したときに縮尺が正しくなるように、ズームを処理します。

これがバグなのか、それとも JavaScript で修正できるものなのか、考えています。

ビューポートのメタコンテンツで、私は初期スケールを1.0に設定し、最小または最大のスケールを設定していません(また、そうしたくありません)。 私は、幅を device-width に設定しています。

何かアイデアはありますか?多くの人が、しつこい問題のようなので、解決策を持っていることに感謝していることを知っています。

どのように解決するのですか?

ジェレミー・キース ( @adactio ) は、彼のブログでこれに対する良い解決策を紹介しています。 方向とスケール

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

<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);
    }
}


22-12-2014を更新しました。

iPad 1では、これは動作しません、それはイベントリスナーで失敗します。私は、以下を削除することを発見しました。 .body を削除すると修正されます。

document.addEventListener('gesturestart', function() { /* */ });