kích thước khung nội tuyến bằng CSS trên iOS

Question

Có khung nội tuyến, về cơ bản có nhiều nội dung hơn phù hợp với khung. Kích thước của khung hình dựa trên kích thước màn hình trình duyệt và cho phép cuộn quá tải, hoạt động hoàn hảo trên tất cả các trình duyệt, ngoại trừ iOS. Trên iOS, safari quyết định thay đổi kích cỡ khung hình để vừa với nội dung. Không phải những gì bạn mong đợi.

Ví dụ mã trên jsFiddle:
http://jsfiddle.net/R3PKB/2/

Hãy thử nó ra trên các thiết bị iOS của bạn:
http://jsfiddle.net/R3PKB/2/embedded/result

HTML:

<div class="frame_holder"> 
    <iframe class="my_frame"> 
    // The content 
    </iframe> 
</div> 

CSS:

body { 
    position: relative; 
    background: #f0f0f0; 
} 

.frame_holder { 
    position: absolute; 
    top: 50px; 
    bottom: 50px; 
    left: 50px; 
    right: 50px; 
    background: #ffffff; 
} 

.my_frame { 
    width: 100%; 
    height: 100%; 
    border: 1px solid #e0e0e0; 
} 

Answer 1

Bạn có thể làm cho nó hoạt động bằng cách thêm div gói với overflow: auto; và -webkit-overflow-scrolling:touch;. Dưới đây là ví dụ của bạn với nó: http://jsfiddle.net/R3PKB/7/

Theo lời các câu hỏi trước về SO đó là một lỗi kể từ khi iOS 4. Tôi thấy biết thêm ở đây: https://stackoverflow.com/a/6721310/1047398 iframe on iOS (iPad) content cropping issue

Answer 2

Đây là một câu hỏi cũ, nhưng kể từ khi nó đến trước trên google và vấn đề tồn tại trên hiện nay các thiết bị iOS, tôi repost cách khắc phục tốt hơn mà tôi tìm thấy trên trang này: How to get an IFrame to be responsive in iOS Safari?

về cơ bản, nếu bạn có một iframe với cuộn (giả sử một widget twitter), giải pháp ở trên sẽ không hoạt động tốt vì nó làm cho phụ huynh có thể cuộn được. Bản sửa lỗi phù hợp với tôi đang thay thế height: 100% bằng height: 1px; min-height: 100%;.

Answer 3

sử dụng height: 1px; min-height: 100%; không hoạt động đối với tôi, mặc dù tôi không cần phần tử cuộn. Tôi đã phải sử dụng các overflow:auto; trên một xung quanh div thay thế. Lưu ý rằng phương pháp này không được khuyến khích vì nó có thể có hậu quả không mong muốn, nhưng tôi đã thử nghiệm trên các trình duyệt dành cho máy tính để bàn/Android và iOS và không thể tìm thấy bất kỳ vấn đề nào. ngón tay được chuyển qua.

Đây là một bài đẹp từ Andy Shora trên một số iOS iframe sắc thái: http://andyshora.com/iframes-responsive-web-apps-tips.html

Answer 4

Nếu iOS Safari được hiển thị nội dung iframe của bạn từ một nguồn gốc khác nhau hơn so với dự kiến ​​(tức là nó được chuyển qua bởi một số pixel), thử thêm scrolling="no" làm thuộc tính cho khung nội tuyến. Điều này sẽ ngăn không cho nó tự động phù hợp với nội dung của nó.

Thêm here.