Что такое атрибут начального масштаба, масштабируемый пользователем, минимальный масштаб, максимальный масштаб в метатеге?

Я просматривал исходный код сайта и нашел этот кусок кода.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0">

Я хочу знать, что это за начальный масштаб, масштабируемый пользователем, минимальный масштаб, максимальный масштаб и что означают эти значения? А также скажите мне, что все ценности они принимают.

Источник

8 ответов

Решение

Они являются метатегами области просмотра и наиболее применимы в мобильных браузерах.

ширина = ширина устройства

Это означает, что мы говорим браузеру "мой сайт адаптируется к ширине вашего устройства".

Первоначальный масштаб

Это определяет масштаб веб-сайта. Этот параметр устанавливает начальный уровень масштабирования, что означает, что 1 пиксель CSS равен 1 пикселю области просмотра. Этот параметр помогает, когда вы меняете ориентацию или предотвращаете масштабирование по умолчанию. Без этого параметра адаптивный сайт не будет работать.

Максимальный масштаб

Максимальный масштаб определяет максимальный масштаб. Когда вы заходите на сайт, главным приоритетом является maximum-scale=1, и это не позволит пользователю увеличить.

Минимальный масштаб

Минимальный масштаб определяет минимальный масштаб. Это работает так же, как и выше, но определяет минимальный масштаб. Это полезно, когда maximum-scale большой, и вы хотите установить minimum-scale,

Пользователь масштабируемый

Масштабируемое пользователем значение 1.0 означает, что веб-сайт позволяет пользователю увеличивать или уменьшать масштаб.

Но если вы назначите его user-scalable=noэто означает, что веб-сайт не позволяет пользователю увеличивать или уменьшать масштаб.

Источник

Пользователь масштабируемой:

user-scalable = yes (по умолчанию), чтобы позволить пользователю увеличивать или уменьшать масштаб на веб-странице;

user-scalable = no для предотвращения увеличения или уменьшения масштаба.

Вы можете получить более подробную информацию, прочитав следующие статьи.

Демо-код (рекомендуется) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0">
</head>
<body>
    <header>
    </header>
    <main>
        <section>
            <h1>do not using <mark>user-scalable=no</mark></h1>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>

Источник

viewport метатег в мобильном браузере,

Свойство начального масштаба управляет уровнем масштабирования при первой загрузке страницы. Свойства максимального масштаба, минимального масштаба и масштабируемые пользователем определяют, как пользователям разрешается увеличивать или уменьшать масштаб страницы.

Источник

Этот метатег используется всеми адаптивными веб-страницами, то есть теми, которые предназначены для размещения в разных типах устройств - телефон, планшет и настольный компьютер. Атрибуты делают то, что говорят. Однако, как указывает MDN использование метатега viewport для управления макетом в мобильных браузерах,

На экранах с высоким разрешением страницы с initial-scale=1 будет эффективно увеличен браузерами.

Я обнаружил, что следующее гарантирует, что страница отображается с нулевым увеличением по умолчанию.

<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">

Источник

Если вас беспокоит ошибка Google Pagespeed (Lighthouse) на вкладке «Доступность». Вы можете устранить ошибку, заменив этот код вheader.phpфайл в файлах темы.

      <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1">

следует заменить на

      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0">

Вы увидите, что ошибка будет устранена после обновления страницы Pagespeed. Если вы все еще ищете ошибку после замены кода, просто очистите кеш от плагинов оптимизации или на стороне хостинга.

Источник

Ниже приведены атрибуты тега метаданных области просмотра.

Ширина: ширина виртуального видового экрана устройства. Ширина устройства: физическая ширина экрана устройства. Высота: высота "виртуального окна просмотра" устройства. Высота устройства: физическая высота экрана устройства. Начальный масштаб: начальный масштаб при посещении страницы. 1.0 не увеличивает. Минимальная шкала: минимальная величина, которую посетитель может увеличить на странице. 1.0 не увеличивает. Максимальный масштаб: максимальный размер, который посетитель может увеличить на странице. 1.0 не увеличивает. масштабируемый пользователем: позволяет устройству увеличивать и уменьшать масштаб. Значения да или нет.

Источник

Это для контроля аспекта на мобильных телефонах и планшетах. Вы найдете больше информации здесь: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Источник

Этот пост может помочь. https://css-tricks.com/snippets/html/responsive-meta-tag/ Он дает полное описание метатегов и их различных атрибутов.

Источник
Другие вопросы по тегам