Как задать минимальную ширину сайта?

229

05 апреля 2018, 10:51

Создал страницу для тестирования отображения этой страницы на мобильных устройствах. Указал в head name width=800, а wrapper min-width: 800px; и width: 100%;.

Проверяю на android chrome - браузер не чувствует минимальной ширины wrapper и по умолчанию часть страницы за пределами видимости (пример 1), когда требуется, чтобы браузер понимал, какой минимальной ширины страницу ему нужно показать (пример 2).

Как правильно задать минимальную ширину страницы так, чтобы мобильный браузер изначально ее показал, как на примере 2?

Пример 1:

Пример 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>

Answer 1

Убрал ширину у body; заменил content="width=800px" на content="width=device-width, initial-scale=1, shrink-to-fit=no".

width=device-width

нужен для того, чтобы "ширина была равна ширине устройства"

shrink-to-fit=no

нужен для запрета масштабирования в соответствии с окном просмотра

Добавил @media-запросы. Проверьте.

  
@media (min-width: 800px) { 
html, 
body 
{ 
    padding: 0; 
    margin: 0; 
} 
 
.wrapper 
{ 
    box-sizing: border-box; 
    width: 100%; 
    padding: 20px; 
    background: antiquewhite; 
} 
}

<!DOCTYPE html> 
<html lang="ru"> 
<head> 
        <meta charset="utf-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
        <title>Title</title> 
        <link href="/css/common.css" rel="stylesheet"> 
</head> 
<body> 
 
<div class="wrapper"> 
        Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. 
        Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. 
</div> 
 
</body> 
</html>

Answer 2

Укажите в хедере

 <meta name="viewport" content="width=800px, initial-scale=1">

Wrapperу не ничего не указывать(он и так по умолчанию растянется на всю ширину)

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как привязать приложение к устройству?

Как сделать что б один аккаунт работал только на одном устройстве?

219

Java

Преобразовать Polygon в Image

Можно ли в JavaFx сделать преобразование массива Polygon в класс ImageЛибо как-то сохранять их сразу в png, не пользуясь Snapshot

239

Java

Помощь с реккурсией

Для функции

187

Java

Несоответствие возвращаемых типов

Есть класс (ByteArrayOutputStream)Хочу добавить его наследнику поддержку интерфейса SeekableByteChannel

224