Я переглядав вихідний код веб-сайту і знайшов цей фрагмент коду.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0">
Я хочу знати, що це за початкова шкала, масштабована користувачем, мінімальна шкала, максимальна шкала, і що ці значення означають? А також скажи мені, які всі цінності вони приймають.
Відповіді:
Вони є метатегами області перегляду, і вони найбільш застосовні в мобільних браузерах.
Це означає, що ми повідомляємо браузеру “мій веб-сайт адаптується до ширини вашого пристрою”.
Це визначає масштаб веб-сайту. Цей параметр встановлює початковий рівень масштабування, що означає, що 1 піксель CSS дорівнює 1 пікселю області перегляду . Цей параметр допомагає під час зміни орієнтації або запобігання масштабуванню за замовчуванням. Без цього параметра адаптивний сайт не працюватиме.
Максимальна шкала визначає максимальне масштабування. Коли ви заходите на веб-сайт, головним пріоритетом є maximum-scale=1, і це не дозволяє користувачеві збільшувати масштаб.
Мінімальний масштаб визначає мінімальний масштаб. Це працює так само, як і вище, але визначає мінімальний масштаб. Це корисно, коли maximum-scaleвелике, і ви хочете встановити minimum-scale.
Масштабована користувачем, призначена 1.0, означає, що веб-сайт дозволяє користувачеві збільшувати або зменшувати масштаб.
Але якщо його призначити user-scalable=no, це означає, що веб-сайт не дозволяє користувачеві збільшувати або зменшувати масштаб.
1.0або yes?
масштабована користувачем:
масштабоване користувачем = так (за замовчуванням), щоб дозволити користувачеві збільшувати або зменшувати веб-сторінку;
масштабоване користувачем = ні, щоб запобігти збільшенню або зменшенню масштабу користувача.
Ви можете отримати більш детальну інформацію, прочитавши наступні статті.
<!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">
Це для управління аспектом на мобільних телефонах та планшетах. Більше інформації ви знайдете тут: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Цей допис може допомогти. https://css-tricks.com/snippets/html/responsive-meta-tag/ Він дає повний опис мета-тегів та різних його атрибутів.
<meta name="viewport" content="width= 640,initial-scale=0.7,minimum-scale=1.0,maximum-scale=1.0" />Ви можете пояснити це? ти вважаєш його дійсним?