[解決済み] 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() { /* */ });
関連
-
[解決済み] jQueryを使用してハイパーリンクのhref属性を変更する方法
-
[解決済み] <Enter>でjQuery UIダイアログを送信する
-
[解決済み] Google maps API V3 - 同一地点に複数のマーカーを設置する。
-
[解決済み] ExtJS 4のイベントハンドリングについて
-
[解決済み] JavaScriptを使用してHTML要素に属性を追加/更新するには?
-
[解決済み] jqueryはjavascriptのライブラリなのかフレームワークなのか?[クローズド]
-
[解決済み] AJAX Mailchimp サインアップフォームの統合
-
[解決済み] ECMAScriptとは?
-
[解決済み] Javascript の parseInt() で先頭のゼロを削除する。
-
[解決済み] javascriptでオプションのパラメータを扱う
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ブラウザ間のマウスホイール速度の正規化
-
[解決済み] JSのDateからDay名
-
[解決済み] javascriptで2つの数値を連結する方法は?
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] CORS OriginヘッダーとCSRFトークンによるCSRF保護
-
[解決済み] Javascript 空の配列の削減
-
[解決済み] TypeScriptプロジェクトで既存のC#クラス定義を再利用する方法
-
[解決済み] javascriptでオプションのパラメータを扱う
-
[解決済み] JavaScriptの文字列プリミティブとStringオブジェクトの違いは何ですか?
-
[解決済み] これは純関数ですか?