Phóng to màn hình khi một phương thức Bootstrap được mở trên iOS 9 Safari

Question

Khi tôi mở một phương thức Bootstrap 3 trên iOS9 Safari, màn hình phóng to. Nó hoạt động như mong đợi trên ứng dụng Chrome trên iPhone. Dưới đây là những hình ảnh hiển thị vấn đề.

Safari ảnh chụp màn hình:

Chrome ảnh chụp màn hình (hành vi dự kiến):

Answer 1

Các mã sau đây khắc phục sự cố cho tôi (và một số người khác -> xem GitHub link):

body { 
    padding-right: 0px !important 
} 

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

Nguồn: https://github.com/jschr/bootstrap-modal/issues/64#issuecomment-55794181

Answer 2

Tôi không có ý tưởng tại sao điều này đang xảy ra. Các ví dụ phương thức trên trang web bootstrap đang hoạt động tốt.

Dù sao đi nữa, đây là những gì tôi đã làm.

Tôi đã thay đổi thẻ meta chế độ xem, để buộc safari không phóng to. Tôi cũng không muốn lấy đi thu phóng từ người dùng, vì vậy tôi đã thay đổi lại khi người dùng loại bỏ phương thức.

Để buộc dừng zoom:

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

Để thay đổi nó trở lại mặc định:

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

Answer 3

Tôi cũng bị ảnh hưởng bởi vấn đề này và đã theo dõi xuống những gì tôi tin là các vấn đề.

Vấn đề (ít nhất là đối với tôi) có vẻ là khi nội dung trên trang không điền theo chiều dọc trang, làm cho iOS 9 Safari phóng to khi phương thức được hiển thị. Điều này sẽ giải thích tại sao ví dụ Bootstrap hoạt động như mong đợi - trang có rất nhiều nội dung (theo chiều dọc).

Tôi đoán rằng nó cần một số phép thuật CSS (chiều cao: 100% ở đâu đó?). Nếu bất cứ ai là một whiz với CSS đặc biệt là Bootstrap thì bất kỳ trợ giúp sẽ được đánh giá cao, trong khi chờ đợi tôi sẽ tiếp tục cố gắng tìm một sửa chữa & đăng trở lại đây với một bản cập nhật.

Cập nhật: Tôi đã triển khai CSS Sticky Footer và điều này đã giải quyết được vấn đề - không chính xác là bản sửa lỗi tôi muốn nhưng nó vẫn hoạt động. Để tham khảo, tôi đã sử dụng triển khai chân trang dính bởi Ryan Fait (http://ryanfait.com/sticky-footer/) nhưng tôi đoán bất kỳ chân trang dính nào cũng sẽ hoạt động.

Answer 4

Nó dường như là một lỗi viewport.

Thảo luận ở đây: https://www.reddit.com/r/web_design/comments/3la04p/psa_safari_on_ios9_has_a_media_query_bug/

Mã mà làm việc cho tôi từ chủ đề đó:

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

Dựa trên Sandeep Singh's Answer, nhưng điều chỉnh để lắng nghe cho tất cả các phương thức mở/đóng, và để lưu trữ các nội dung ban đầu.

Tôi đang sử dụng webpack, nhưng chỉ jQuery ($) với phương thức fixBootstrapModalZoomBug dưới đây là cần thiết.

// 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

Theo Bootstrap's Wall of Browser Bugs, đây là sự cố đã biết trong iOS 9 Safari.

Safari (iOS 9 +)
Đôi khi quá mức zoom tự động được áp dụng sau khi mở một phương thức, và> người dùng không được phép để thu nhỏ

WebKit bug #150715

Tiêu đề của lỗi WebKit là:

Phóng to quá mức được thực thi khi cơ thể ngắn và tràn: ẩn (vỡ mới iOS 9)

Dựa trên một phần của tiêu đề khi cơ thể là ngắn, tôi cố gắng thiết lập chiều cao tối thiểu của cơ thể với chiều cao khung nhìn, mà làm việc cho trang web của tôi mặc dù có thể không phải là một giải pháp chung:

body { 
    min-height: 100vh; 
} 

Answer 7

Như đã lưu ý trong các ý kiến ​​của câu trả lời được chấp nhận, tốt nhất là áp dụng bản sửa lỗi cho chỉ lớp mở .modal.

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