web-dev-qa-db-ja.com

iOS 9 SafariでBootstrapモーダルを開くと画面が拡大する

IOS9 SafariでBootstrap 3モーダルを開くと、画面がズームインします。iPhoneのChromeアプリで期待どおりに動作します。下の写真は問題を示しています。

Safariのスクリーンショット：

safari screenshot

Chromeスクリーンショット（予想される動作）：

chrome screenshot

javascriptcsstwitter-bootstrap-3mobile-safariios9
35
Sandeep Singh

次のコードは私のために問題を修正しました（そして他の人々-> GitHubリンクを参照）

body {
  padding-right: 0px !important
}

.modal-open {
  overflow-y: auto;
}

ソース： https://github.com/jschr/bootstrap-modal/issues/64#issuecomment-55794181

29
KingDome24

Bootstrapの Wall of Browser Bugs によると、これはiOS 9 Safariの既知の問題です。

Safari（iOS 9以降）
モーダルを開いた後に過度の自動ズームが適用される場合があり、ユーザーはズームアウトできません

WebKitバグ＃150715

WebKitバグのタイトルは次のとおりです。

ボディが短くオーバーフローしている場合の過度の強制ズーム：非表示（新しいiOS 9の破損）

タイトルの部分に基づいて、ボディが短い場合、ボディの最小の高さをビューポートの高さに設定してみました。一般的な解決策である：

body {
    min-height: 100vh;
}
9
Doug Richardson

なぜこれが起こっているのか分かりません。 bootstrap= Webサイトのモーダル例は正常に機能しています。

とにかく、ここに私がやったことがあります。

サファリがズームしないように、ビューポートメタタグを変更しました。また、ユーザーからズームを取り去りたくなかったので、ユーザーがモーダルを閉じたときに元に戻しました。

ズームを強制的に停止するには：

$('#myModal').on('show.bs.modal', function (e) {
document.querySelector('meta[name="viewport"]').content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
})

デフォルトに戻すには：

$('#myModal').on('hidden.bs.modal', function (e) {
document.querySelector('meta[name="viewport"]').content = 'viewport" content="width=device-width, initial-scale=1';
})
7
Sandeep Singh

ビューポートのバグのようです。

ここでの議論： https://www.reddit.com/r/web_design/comments/3la04p/psa_safari_on_ios9_has_a_media_query_bug/

そのスレッドから私のために働いたコード：

if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
    document.querySelector('meta[name=viewport]')
      .setAttribute(
        'content',
        'initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=no'
      );
  }
6
LOLapalooza

受け入れられた回答のコメントに記載されているように、修正は.modal-openクラスのみに適用するのが最善です。

body.modal-open{
  padding-right: 0 !important;
  overflow-y: auto;
}
3
Justin

Sandeep Singh's Answer に基づいていますが、すべてのモーダルオープン/クローズをリッスンし、元のコンテンツを保存するように調整されています。

私はwebpackを使用していますが、jQuery（$）以下のfixBootstrapModalZoomBugメソッドが必要です。

// fix-quirks.js - referenced from my main application's file
var $ = require('jquery');
$(fixQuirks);

function fixQuirks() {
  fixBootstrapModalZoomBug();   
}

function fixBootstrapModalZoomBug() {
  // Fix Bootstrap Modal zoom bug
  //    https://stackoverflow.com/questions/32675849/screen-zooms-in-when-a-bootstrap-modal-is-opened-on-ios-9-safari
  if(/iPad|iPhone|iPod/.test(navigator.userAgent.toLowerCase())) {
    var m = $('meta[name=viewport]');
    var originalContent = m.attr('content');

    $('body').delegate('*','show.bs.modal',function(ev){
      m.attr('content', 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0');
    }).delegate('*','hidden.bs.modal',function(ev){
      m.attr('content', originalContent);
    });
  }
}
1
Tracker1

私もこの問題に見舞われ、私が問題だと思うことを突き止めました。

問題（少なくとも私にとって）は、ページのコンテンツがページを垂直方向に埋めていないために、モーダルが表示されたときにiOS 9 Safariがズームインするようです。これは、Bootstrapの例が期待どおりに機能する理由を説明します-ページには多くのコンテンツがあります（垂直に）。

CSSマジック（高さ：100％どこか？）が必要だと思います。誰かがCSSに特に興味があるなら、特にBootstrapがあれば、助けをいただければ幸いです。その間、修正を見つけて更新してここに投稿していきます。

更新：私はCSSスティッキーフッターを実装しました。これは問題を解決しました-私が望んだ正確な修正ではありませんが、それでも動作しています。参考のために、Ryan Faitによるスティッキーフッターの実装（ http://ryanfait.com/sticky-footer/ ）を使用しましたが、スティッキーフッターはすべて動作すると思います。

0
Alan Savage