iframe được cắt khi trong div trên safari di động

Tôi muốn scale iframe trên mobile safari.iframe được cắt khi trong div trên safari di động

Tôi bao gồm iframe bên trong một div.

<html> 
<body> 
    <div id="iframe_container"> 
     <iframe src="http://jsfiddle.net/viebel/kTzDS/show" style="width:300px;height:300px;"/> 
    </div> 
</body> 
</html>

Bây giờ tôi đang mở rộng quy mô các div với mã này:

$(function() { 
    $('#iframe_container').css({ 
     '-webkit-transform': 'scale(0.7)', 
     '-webkit-transform-origin': '0 0 ' 
    }); 
});

On iOS/Safari, iframe được cắt (tức là không thể được hoàn toàn nhìn thấy) trong khi trên máy tính để bàn/chrome, số iframe là không phải là bị cắt.

Đây là một trang jsfiddle với mã: http://jsfiddle.net/viebel/tJQUH/

Chỉ cần làm rõ: đây là một trang demo mà minh chứng cho vấn đề thực sự - khi được mở trên iPad/iPhone Safari - tất cả ba dòng nên của cùng kích thước: http://jsfiddle.net/viebel/tJQUH/show

Vui lòng tư vấn tôi có thể làm gì để xem iframe trên Mobile Safari hoàn toàn không bị cắt?

Nguồn

2012-02-28 viebel

Tôi đã thực hiện vài changes.Especially làm cho kích thước khung hình là 100%. Sau đó cố gắng mở rộng các iframe itself.Check này ra

  <!DOCTYPE html> 
      <html> 
      <head> 
       <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
       <title> - jsFiddle demo by viebel</title> 

       <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> 

       <link rel="stylesheet" type="text/css" href="/css/normalize.css"> 
       <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 

       <style type='text/css'> 

       </style> 
       <script> 
       $(document).ready(function() 
       { 
       //alert('hai'); 
       $('#ifd').css({ 
        '-webkit-transform': 'scale(1.1)', 
        '-webkit-transform-origin': '0 0', 
        'width': '100%', 
        'height': '100%' 
       }); 
       }); 

       </script> 
      </head> 
      <body> 
       <div id="iframe_container" style="width:500px;height:400px;border:1px solid black;"> 
        <iframe src="http://jsfiddle.net/viebel/kTzDS/show" id="ifd" /> 
       </div> 
      </body> 

      </html>

Liên kết đến jsfiddle: http://jsfiddle.net/viebel/tJQUH/13

Nguồn

2012-03-07 06:24:51 sunnychayen

Bạn có thể vui lòng nĩa câu đố của tôi và thực hiện các thay đổi bạn đã đề xuất và gửi liên kết tới một thay đổi mới không? Nó sẽ dễ dàng hơn nhiều để kiểm tra. Cảm ơn. – viebel

bạn chỉ cần lưu và triển khai trang trên. Sau đó kiểm tra trong ipad.It đang hoạt động – sunnychayen

Nếu bạn thích câu hỏi, vui lòng bỏ phiếu – viebel

Đã xảy ra sự cố trên Safari Mac.

Là một thử nghiệm, tôi sẽ cố gắng để tải lại iframe sau khi thay đổi iframe_container CSS

var iframe = $('#iframe_container iframe'); 
iframe.attr('src', iframe.attr('src'));

Hãy cho tôi biết nếu nó tốt hơn!

Nguồn

2012-02-28 16:29:19 Davide

Cảm ơn! Tôi sẽ thử sau và cho bạn biết. Nếu bạn có bất kỳ ý tưởng nào khác, hãy chia sẻ chúng. – viebel

Thật không may, nó không hoạt động. – viebel

Bạn đang mở rộng div bên ngoài chứ không phải iframe, thử mở rộng iframe và nó có thể hoạt động.

Và kể từ khi bạn đã xác định rằng các iframe nên 300px, nó sẽ được dễ dàng hơn chỉ cần thiết lập chiều cao và chiều rộng iframe để 210px vì đó là 70 phần trăm 300.

Nguồn

2012-03-06 16:31:14 Fireblaze

Bạn có thể vui lòng nĩa câu đố của tôi và thực hiện các thay đổi bạn đã đề xuất và gửi liên kết đến thay đổi mới không? Nó sẽ dễ dàng hơn nhiều để kiểm tra. Cảm ơn. – viebel

sử dụng jQuery's $(window).height() để mở rộng khung nội tuyến và cũng tính toán kích thước khung nội tuyến trên thay đổi hướng.

Nguồn

2012-03-07 11:55:09 Abhidev

iframe được cắt khi trong div trên safari di động

Trả lời

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