У меня есть пример кода ниже. Это отлично работает со всеми браузерами, кроме браузеров на мобильных устройствах.
Проблема заключается в теге переполнения.
Работает со всеми, кроме мобильных:
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>
cnn.com
?<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
в заголовок содержащего html, и отзывчивость снова вернется (по крайней мере, частично).Ответы:
Вот рабочий код. Работает в настольных и мобильных браузерах. Надеюсь, поможет. спасибо за ответ.
источник
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
на содержащую страницу.vw
вместо свойств%
forwidth
иheight
для правильного выравнивания в Chromium 81. В остальном все работает как шарм.Это кросс-браузерный и полностью отзывчивый:
источник
Поместите это в свой CSS.
источник
Это то, что я использовал в прошлом.
Также в
iframe
добавляем следующий стильисточник
overflow: hidden
наoverflow: auto
Для полноэкранного перенаправления кадров и подобных вещей у меня есть два метода. Оба отлично работают на мобильных и настольных компьютерах.
Обратите внимание, что это полноценные допустимые HTML-файлы, работающие в разных браузерах. Просто измените
title
иsrc
под свои нужды.Вы можете отказаться от него,
<meta charset>
если у вас нет символов, отличных от ASCII.1. это мой любимый:
или 2. что-то в этом роде , чуть короче:
Примечание : Для того,
чтобы быть консервативным вышеприведенные примеры избегать использования ,
height:100vh
потому что старые браузеры не знают (может быть спорным в эти дни) иheight:100vh
не всегда совпадают сheight:100%
мобильными браузерами (вероятно , не применим здесь). В противном случаеvh
это немного упрощает, поэтому3. это пример использования vh (не мой любимый, менее совместим с небольшим преимуществом)
источник