Toàn trang <iframe>

97

Tôi có mã ví dụ bên dưới. Điều này hoạt động tốt với tất cả các trình duyệt ngoại trừ trình duyệt trên thiết bị di động.

Thẻ tràn là vấn đề.

Hoạt động với tất cả ngoại trừ điện thoại di động:

margin: 0; padding: 0; height: 100%; overflow: hidden;

Hoạt động với tất cả thiết bị di động và không phải máy tính:

margin: 0; padding: 0; height: 100%;

Cách tốt nhất để làm cho nó hoạt động trên cả hai là gì?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Layout</title>
        <style type="text/css">
            body, html
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }
        </style>
    </head>
    <body>
        <iframe width="100%" height="100%" src="http://www.cnn.com" />
    </body>
</html>

html css iframe

— Lacer
nguồn

Tại sao không chỉ chuyển hướng đến cnn.com?

— GolezTrol

cnn.com là một ví dụ. để thể hiện hành vi mà tôi đang cố gắng ngăn chặn.

— Lacer

chỉ cần thêm <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> vào phần đầu của html có chứa và khả năng phản hồi sẽ hoạt động trở lại (ít nhất là một phần).

— Nukey

170

Đây là mã làm việc. Hoạt động trên máy tính để bàn và trình duyệt di động. hy vọng nó giúp. cảm ơn vì mọi người đã phản hồi.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Layout</title>
        <style type="text/css">
            body, html
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }

            #content
            {
                position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
            }
        </style>
    </head>
    <body>
        <div id="content">
            <iframe width="100%" height="100%" frameborder="0" src="http://cnn.com" />
        </div>
    </body>
</html>

— Lacer
nguồn

2

hãy coi chừng, khi tôi muốn đặt iframe lên trên - đã xảy ra sự cố trong Chrome. Tôi thêm thẻ đóng </ iframe> và làm việc

— Michal - wereda-net

Có vẻ như nó đang lấy đi khả năng phản hồi (tức là thu gọn các cột, v.v.) khỏi nội dung trong iframe. Nhưng bằng cách nào đó chỉ khi mở trang bằng safari di động, không phải khi thay đổi kích thước trình duyệt trên máy tính để bàn. Bất kỳ ý tưởng những gì có thể gây ra hành vi đó?

— psteinweber

3

@psteinweber, bạn chỉ cần thêm <meta content='width=device-width, initial-scale=1.0' name='viewport'>vào trang chứa.

— jfeust

Phải sử dụng vwthay vì %for widthvà height thuộc tính để có được căn chỉnh phù hợp trong Chromium 81. Nếu không thì hoạt động giống như một chiếc bùa.

— Josh Habdas

18

Đây là trình duyệt chéo và hoàn toàn đáp ứng:

<iframe
  src="https://drive.google.com/file/d/0BxrMaW3xINrsR3h2cWx0OUlwRms/preview"
  style="
    position: fixed;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    border: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 999999;
    height: 100%;
  ">
</iframe>

— tawsif torabi
nguồn

7

Đặt cái này vào CSS của bạn.

iframe {
  width: 100%;
  height: 100vh;
}

— shoriwa-shaun-benjamin
nguồn

3

Đây là những gì tôi đã sử dụng trong quá khứ.

html, body {
  height: 100%;
  overflow: auto;
}

Cũng trong iframethêm phong cách sau

border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%

— Jay Patel
nguồn

cảm ơn vì đã trả lời nhưng về cơ bản đó là những gì tôi có nên nó không hoạt động. Trên trình duyệt dành cho thiết bị di động, nó cắt bỏ mọi thứ bị tràn và không cho phép bạn cuộn.

— Lacer

@Lacer Hãy thử thay thế overflow: hiddenvớioverflow: auto

— Jay Patel

đã thử điều đó. trên trình duyệt di động nó vẫn cắt nó đi và trên các trình duyệt máy tính để bàn nó gây ra cuộn đôi

— Lacer

nope vẫn cuộn đôi trong trình duyệt của máy tính để bàn và sẽ cắt đứt trên các trình duyệt di động

— Lacer

2

Đối với chuyển hướng khung toàn màn hình và những thứ tương tự, tôi có hai phương pháp. Cả hai đều hoạt động tốt trên thiết bị di động và máy tính để bàn.

Lưu ý rằng đây là các tệp HTML hợp lệ, hoạt động trên nhiều trình duyệt. Chỉ cần thay đổi titlevà srccho nhu cầu của bạn.
Bạn có thể xem xét bỏ <meta charset>nếu bạn không có các ký tự không phải ASCII.

1. đây là yêu thích của tôi:

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-1 </title>
<meta name=viewport content="width=device-width">
<style>
 html, body, iframe { height:100%; width:100%; margin:0; border:0; display:block }
</style>
<iframe src=src1></iframe>

<!-- More verbose CSS for better understanding:
  html   { height:100% }
  body   { height:100%; margin:0 }
  iframe { height:100%; border:0; display:block; width:100% } -->

hoặc 2. một cái gì đó tương tự , ngắn hơn một chút:

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-2 </title>
<meta name=viewport content="width=device-width">
<iframe src=src2 style="position:absolute; top:0; left:0; width:100%; height:100%; border:0">
</iframe>

Lưu ý :
Để thận trọng, các ví dụ trên tránh sử dụng height:100vhvì các trình duyệt cũ không biết điều đó (có thể là tranh luận ngày nay) và height:100vhkhông phải lúc nào cũng bằng height:100%trên trình duyệt di động (có thể không áp dụng ở đây). Nếu không, hãy vhđơn giản hóa mọi thứ một chút, vì vậy

3. đây là một ví dụ sử dụng vh (không phải yêu thích của tôi, ít tương thích hơn với ít lợi thế)

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-3 </title>
<meta name=viewport content="width=device-width">
<style>
 body { margin:0 }
 iframe { display:block; width:100%; height:100vh; border:0 }
</style>
<iframe src=src3></iframe>

— jj
nguồn