Создал страницу для тестирования отображения этой страницы на мобильных устройствах. Указал в head
name width=800
, а wrapper
min-width: 800px;
и width: 100%;
.
Проверяю на android chrome
- браузер не чувствует минимальной ширины wrapper
и по умолчанию часть страницы за пределами видимости (пример 1), когда требуется, чтобы браузер понимал, какой минимальной ширины страницу ему нужно показать (пример 2).
Как правильно задать минимальную ширину страницы так, чтобы мобильный браузер изначально ее показал, как на примере 2?
html,
body
{
padding: 0;
margin: 0;
width: 100%;
}
.wrapper
{
box-sizing: border-box;
min-width: 800px;
width: 100%;
padding: 20px;
background: antiquewhite;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=800, initial-scale=1">
<title>Title</title>
<link href="/css/common.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.
Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
</div>
</body>
</html>