Der Bildschirm wird vergrößert, wenn ein Bootstrap-Modal auf iOS 9 geöffnet wird Safari

Question

Wenn ich ein Bootstrap 3-Modal in iOS9 Safari öffne, wird der Bildschirm vergrößert. Er funktioniert wie erwartet in der Chrome App auf dem iPhone. Unten sind die Bilder, die das Problem zeigen.

Safari Screenshot:

Chrome Screenshot (erwartetes Verhalten):

Answer 1

Der folgende Code das Problem behoben für mich (und einige andere Leute -> siehe GitHub Link):

body { 
    padding-right: 0px !important 
} 

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

Quelle: https://github.com/jschr/bootstrap-modal/issues/64#issuecomment-55794181

Answer 2

Ich habe keine Ahnung, warum dies geschieht. Modale Beispiele auf der Bootstrap-Website funktionieren einwandfrei.

Wie auch immer, hier ist was ich getan habe.

Ich habe das Viewport-Meta-Tag geändert, damit Safari nicht zoomt. Ich wollte auch nicht den Zoom vom Benutzer wegnehmen, also änderte ich ihn zurück, als der Benutzer das Modal wegwarf.

zu zwingen, um den Zoom zu stoppen:

$('#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'; 
})  

es zu Standard zurück zu ändern:

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

Answer 3

Ich habe auch dieses Problem und haben aufgespürt, was ich das zu glauben getroffen worden Problem.

Das Problem (zumindest für mich) scheint zu sein, wenn der Inhalt auf der Seite nicht die Seite vertikal füllt, was dazu führt, dass iOS 9 Safari beim Anzeigen des Modales heranzoomt. Dies würde erklären, warum das Bootstrap-Beispiel wie erwartet funktioniert - die Seite hat viel Inhalt (vertikal).

Ich vermute, dass es etwas CSS-Magie braucht (eine Höhe: 100% irgendwo?). Wenn irgendjemand ein Experte mit CSS ist, vor allem Bootstrap, dann würde jede Hilfe geschätzt werden, in der Zwischenzeit werde ich weiter versuchen, einen Fix & Post hier mit einem Update zu finden.

Update: Ich habe eine CSS Sticky Footer implementiert und dies hat das Problem angesprochen - nicht genau die Korrektur, die ich wollte, aber es funktioniert trotzdem. Als Referenz habe ich die Sticky-Footer-Implementierung von Ryan Fait (http://ryanfait.com/sticky-footer/) verwendet, aber ich denke, dass jeder sticky footer funktionieren würde.

Answer 4

Es scheint ein Ansichtsfenster Bug zu sein.

Diskussion hier: https://www.reddit.com/r/web_design/comments/3la04p/psa_safari_on_ios9_has_a_media_query_bug/

Code, der für mich von diesem Thread gearbeitet:

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

Answer 5

Basierend auf Sandeep Singh's Answer, aber angepasst für alle modalen Öffnen/Schließen, zu hören und den ursprünglichen Inhalt zu speichern.

Ich benutze Webpack, aber nur jQuery ($) mit der fixBootstrapModalZoomBug Methode wird benötigt.

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

Answer 6

Nach Bootstrap des Wall of Browser Bugs, ist dies ein bekanntes Problem in iOS 9 Safari.

Safari (iOS 9+)
Manchmal übermäßiger automatischer Zoom wird nach dem Öffnen eines modalen angewandt, und> der Benutzer nicht

zu verkleinern ist erlaubt

WebKit bug #150715

Der Titel Der WebKit Bug ist:

Übermäßiger erzwungener Zoom, wenn der Körper kurz ist und Überlauf: versteckt (neue iOS 9 Bruch)

Basierend auf dem Teil des Titels , wenn der Körper kurz ist, habe ich versucht, den Körper der Mindesthöhe der Darstellungshöheneinstellung, die eine allgemeine Lösung sein kann, nicht jedoch für meine Website gearbeitet:

body { 
    min-height: 100vh; 
} 

Answer 7

Wie in den Kommentaren der akzeptierten Antwort angemerkt, ist es am besten, den Fix nur auf die .modal-open-Klasse anzuwenden.

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