IFrame vấn đề chiều cao trên iOS (Safari di động)

Ví dụ mã nguồn trang web:IFrame vấn đề chiều cao trên iOS (Safari di động)

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <title>Page</title> 
</head> 
<body> 
<div class="main" style="height: 100%;"> 
    <div class="header" style="height: 100px; background-color: green;"></div> 

    <iframe src="http://www.wikipedia.com" 
      style="height: 200px; width: 100%; border: none;"></iframe> 

    <div class="footer" style="height: 100px; background-color: green;"></div> 
</div> 
</body> 
</html>

Vấn đề là, rằng height của 200px từ phong cách inline IFrame bị bỏ qua trên safari di động:

Ngoài ra tôi muốn thay đổi chiều cao của IFrame theo cách động thông qua JavaScript vani mà không hoạt động chút nào với mã sau:

document.getElementsByTagName('iframe')[0].style.height = "100px"

Giá trị của kiểu height được thay đổi chính xác theo công cụ dành cho nhà phát triển nhưng nó chỉ bị bỏ qua vì chiều cao thực sự được hiển thị của IFrame không thay đổi.

này dường như chỉ là một vấn đề trong điện thoại di động Safari và đang làm việc như mong đợi trên các phiên bản mới nhất của máy tính để bàn Safari, Firefox, Chrome, Androids WebView, vv

Testpage: http://devpublic.blob.core.windows.net/scriptstest/index.html

PS .: Tôi đã thử nghiệm điều này với nhiều thiết bị khác nhau trên trình duyệt và cũng chụp các ảnh chụp màn hình ở đó vì tôi không có iDevice thực tế trong tầm tay.

Nguồn

2015-12-16 suamikim

Nó trông như thế này: How to get an IFrame to be responsive in iOS Safari?

khung nội tuyến có một vấn đề trên iOS chỉ, vì vậy bạn phải thích ứng với iframe của bạn với nó.

Bạn có thể đặt một div gói iframe, đặt css trên khung nội tuyến và, cái gì làm việc cho tôi, điều này: đặt thuộc tính scrolling = 'no'.

Chúc các bạn nhìn.

Nguồn

2015-12-16 19:30:04

[Giải pháp] (http://stackoverflow.com/a/23083463/1273551) trong chuỗi đã đề cập đã giải quyết một phần vấn đề của tôi đã xảy ra khi xoay thiết bị. Vì tôi thực sự có quyền truy cập vào các nguồn nội dung IFrame, tôi đã có thể giải quyết các vấn đề về chiều cao của mình bằng cách tự động đặt chiều cao của nội dung IFrame với cùng chiều cao mà tôi đã cố gắng đặt trên chính IFrame. – suamikim

Tôi gặp vấn đề tương tự. Và sau khi thử tất cả các giải pháp tôi có thể tìm thấy, cuối cùng tôi đã tìm ra cách giải quyết nó.

Vấn đề này do Safari của iOS gây ra, nó sẽ tự động mở rộng phạm vi khung nội tuyến để vừa với nội dung trang bên trong.

Nếu bạn đặt thuộc tính scrolling = 'no' vào khung nội tuyến là <iframe scrolling='no' src='content.html'>, vấn đề này có thể được giải quyết nhưng khung nội tuyến không thể hiển thị toàn bộ nội dung của trang, nội dung vượt quá khung sẽ bị cắt.

Vì vậy, chúng ta cần đặt một div gói iframe và xử lý sự kiện cuộn trong đó.

<style> 
.demo-iframe-holder { 
    width: 500px; 
    height: 500px; 
    -webkit-overflow-scrolling: touch; 
    overflow-y: scroll; 
} 

.demo-iframe-holder iframe { 
    height: 100%; 
    width: 100%; 
} 
</style> 

<html> 
<body> 
    <div class="demo-iframe-holder"> 
     <iframe src="content.html" /> 
    </div> 
</body> 
</html>

tham khảo:

https://davidwalsh.name/scroll-iframes-ios

How to get an IFrame to be responsive in iOS Safari?

Hy vọng nó giúp.

Nguồn

2017-08-08 08:09:50

-1

VẤN ĐỀ:

Tôi gặp sự cố tương tự. Định kích thước/tạo kiểu cho vùng chứa của iframe và thêm cuộn = "không" vào khung nội tuyến không hoạt động đối với tôi.Có một tràn di chuyển như Freya mô tả không phải là một lựa chọn, một trong hai, bởi vì các nội dung của khung nội tuyến của tôi cần thiết để kích thước tùy thuộc vào thùng chứa cha mẹ. Đây là cách ban đầu của tôi (không hoạt động, tràn container) mã iframe được cấu trúc:

<style> 
    .iframe-wrapper { 
     position: relative; 
     height: 500px; 
     width: 100%; 
    } 

    .iframe { 
     display: block; 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     width: 100%; 
     height: 100%; 
    } 
</style> 

<div class="iframe-wrapper"> 
    <iframe frameborder="0" scrolling="no" class="iframe" src="content.html"></iframe> 
</div>

SOLUTION:

này siêu đơn giản chút CSS Hack đã làm các trick:

<style> 
    .iframe-wrapper { 
     position: relative; 
     height: 500px; 
     width: 100%; 
    } 

    .iframe { 
     display: block; 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     width: 100px; 
     min-width: 100%; 
     height: 100px; 
     min-height: 100%; 
    } 
</style> 

<div class="iframe-wrapper"> 
    <iframe frameborder="0" scrolling="no" class="iframe" src="content.html"></iframe> 
</div>

Set của iframe chiều cao/chiều rộng cho một số giá trị pixel nhỏ ngẫu nhiên. Đặt chiều cao tối thiểu là & chiều rộng tối thiểu cho những gì bạn thực sự muốn chiều cao/chiều rộng. Điều này hoàn toàn cố định vấn đề cho tôi.

Nguồn

2017-08-08 21:22:04 AnnaFractuous

Việc thêm 'min-width' và' min-height' rõ ràng không hiệu quả đối với tôi và tôi sẽ ngạc nhiên nếu điều đó xảy ra. [Trả lời bởi freya-yu] (https://stackoverflow.com/a/45562779/638546) đã làm các trick. –

IFrame vấn đề chiều cao trên iOS (Safari di động)

Trả lời

Các vấn đề liên quan