У меня есть баннер в верхней части моей веб-страницы, который должен охватывать ширину экрана пользователя. Если содержимое под баннером шире, чем экран пользователя, баннер должен быть расширен до ширины содержимого ниже, чтобы он был виден при горизонтальной прокрутке пользователя.
Моя веб-страница нормально отображается на рабочих столах, которые я пробовал, например, Firefox и Safari. Он также хорошо отображается на телефонах Android. Тем не менее, он не отображается должным образом на iPhone.
Я пытался разобрать веб-страницу до чего-то простого, чтобы понять, суть проблемы. Интересно, что на этой голой странице есть проблема с отображением в Android.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width"/>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#graphic_top {width: 100%; height: 48px; background-color: #637768;}
</style>
</head>
<body>
<div id="graphic_top"> <!-- displays a green banner across the top -->
<div style="width: 890px; margin: 0 auto;">
<p>Scroll horizontally on an iPhone or Android phone and you will see that the green background-color
in "graphic_top" does not extend beyond the width of the device's screen.
</p>
</div>
</div>
</body>
</html>
Мне кажется, я понимаю причину этой проблемы. Элемент div "graphic_top" имеет ширину 100%. Видимо, это 100% ширины устройства.
Есть ли способ заставить div расширяться по горизонтали, чтобы вместить содержимое внутри?