Повна сторінка <iframe>

97

У мене є приклад коду нижче. Це чудово працює з усіма браузерами, крім браузерів на мобільних пристроях.

Тема переповнення - проблема.

Працює з усіма, крім мобільних:

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

Працює з усіма мобільними, а не комп'ютерами:

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

Який найкращий спосіб змусити його працювати на обох?

<!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
джерело

Чому б просто не перенаправити на cnn.com?

— GolezTrol

cnn.com є більше прикладом. показати поведінку, яку я намагаюся запобігти.

— Lacer

просто додайте <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> до заголовка вміщуваного html, і реагування повернеться знову (принаймні частково).

— Nukey

171

Ось робочий код. Працює в настільних і мобільних браузерах. сподіваюся, це допоможе. дякую за те, що всі відповіли.

<!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
джерело

2

будьте уважні, коли я хотів поставити вбудований фрейм вище - у Chrome була проблема. Я додав закриття </iframe> і працює

— Міхал - wereda-net

Здається, це забирає реакцію (тобто згортання стовпців тощо) у вмісту в рамках iframe. Але якось лише при відкритті сторінки з мобільним сафарі, а не при зміні розміру браузера на робочому столі. Будь-які ідеї, що може спричинити таку поведінку?

— psteinweber

3

@psteinweber, вам просто потрібно додати <meta content='width=device-width, initial-scale=1.0' name='viewport'>на відповідну сторінку.

— jfeust

Довелося використовувати vwзамість %for widthі height властивості, щоб отримати належне вирівнювання в Chromium 81. В іншому випадку це працює як шарм.

— Джош Хабдас,

18

Це крос-браузерний і повністю адаптивний:

<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
джерело

7

Помістіть це у свій CSS.

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

— Шоріва-Шон-Бенджамін
джерело

3

Це те, що я використовував у минулому.

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

Також у iframeдодайте наступний стиль

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

— Джей Патель
джерело

дякую за відповідь, але це по суті те, що я маю, тому це не працює. У мобільному браузері він відсікає будь-що, що переповнює, і не дозволяє прокручувати.

— Lacer

@Lacer Спробуйте замінити overflow: hiddenнаoverflow: auto

— Jay Patel

спробував це. у мобільному браузері він все ще відсікає його, а в браузерах для настільних ПК - подвійні прокрутки

— Lacer

ще немає подвійного прокручування в настільному браузері та відсікається у мобільних браузерах

— Lacer

2

Для повноекранного перенаправлення кадру та подібних речей у мене є два методи. Обидва вони чудово працюють на мобільних та настільних комп’ютерах.

Зверніть увагу, що це повні крос-браузерні робочі файли HTML. Просто змініть titleі srcдля ваших потреб.
Ви можете розглянути можливість скидання, <meta charset>якщо у вас немає символів, що не належать до ASCII.

1. це мій улюблений:

<!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% } -->

або 2. щось подібне , трохи коротше:

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

Примітка :
Щоб бути консервативними, наведені вище приклади уникайте використання, height:100vhоскільки старі браузери цього не знають (можливо, сьогодні суперечать) і height:100vhне завжди дорівнюють height:100%мобільним браузерам (можливо, тут не застосовується). Інакше vhдещо спрощує ситуацію, отже

3. це приклад використання vh (не мій улюблений, менш сумісний з невеликою перевагою)

<!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
джерело