Условия - на страницах есть блоки разной ширины, заданные в пикселях.
Надо добавить еще один блок на 100% ширины.
Проблема:
Если к существующему блоку шириной, например, в 1000px, добавить блок с width = 100%, то на устройствах с шириной экрана меньше 1000px, браузер мастштабируется так, чтобы блок 1000px влез целиком. При этом блок с width = 100% получается шириной, равной физической ширине экрана.
Т.е. в цифрах - экран 412х732. Вот блок и получается шириной 412 пикселей, а не желаемые 1000. Визуально блок с width = 100% не на весь экран. А 1000px - на весь.
Если блоку жестко задать 1000, то конечно все получится, но максимальная ширина блоков на странице не известна - она может быть разной.
Т.е., грубо говоря, нужно с помощью css как-то задать ширину блоку, равной максимальной ширине. Не перебирать же все элементы на странице.
Поменять всю верстку под какой-либо правильно-кошерный вариант не получится.
Пример кода:
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<style type='text/css'>
.div1 { width: 1000px; background-color: red; height: 100px; }
.div2 { width: 100%; background-color: green; height: 100px; }
</style>
<div class="div1">width: 1000px</div>
<div class="div2">width: 100%</div>
</body>
</html>
Простой
Простой