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



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



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


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

804   6  

6 ответов:

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

width=device-width

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

начально-масштаб

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

максимум-масштаб

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

минимальных масштабах

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

пользователь-масштабируемое

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

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

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

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

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

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

http://www.html-5.com/metatags/meta-viewport.html

https://css-tricks.com/snippets/html/responsive-meta-tag/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#Attributes enter image description here

демонстрационный код (рекомендуется)

<!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 метатег в мобильном браузере,

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

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

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

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

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

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

Ниже приведены атрибуты тега метаданных видового экрана

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

Comments

    Ничего не найдено.