Первые два блога, очищают концепцию пикселей и просмотра просмотра. Начните сейчас, используйте вкладку META, чтобы установить просмотр.
метатег
Содержимое метатега в основном предоставляет метаинформацию об этой HTML-странице. Проще говоря, вы используете эту информацию, чтобы сообщить браузеру, как анализировать файл HTML. Например
<meta charset="utf-8">
Этот тег сообщает браузеру, что формат кодировки символов HTML-файла — utf-8. Когда браузер разбирает HTML-файл, поскольку метатег находится в голове, он сначала получит эту информацию, а затем браузер будет использовать эту кодировку utf-8 для разбора символов в HTML-файле.
Конечно, в дополнение к простому формату выше, метатеги более распространены в этомname + contentформа:
<meta name="format-detection" content="telephone=no" />
Значение атрибута name сообщает браузеру, что этот метатег установлен наformat-detection, конкретное значение которого находится в содержимомtelephone=no, то есть игнорировать распознавание цифр как телефонных номеров.
настройки области просмотра
Как упоминалось в конце предыдущего блога, адаптация, которую мы сделали, заключается в настройке размера окна просмотра макета, а размер окна просмотра макета можно настроить с помощью метатега. Зайдите в интернет для поиска адаптации мобильного терминала, и вы обязательно увидите следующий код:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
Давайте сначала представим эти свойства:
| Имя свойства | иллюстрировать |
|---|---|
| width | Установите ширину области просмотра макета в виде положительного целого числа или ширины строки устройства. |
| initial-scale | Установите начальное значение масштабирования страницы в виде числа с десятичными знаками. |
| minimum-scale | Минимальное значение масштабирования, разрешенное пользователем, в виде числа с десятичными знаками. |
| maximum-scale | Максимальное значение масштабирования, разрешенное пользователем, в виде числа с десятичными знаками. |
| height | Устанавливаем высоту вьюпорта макета, это свойство нам не важно и редко используется |
| user-scalable | Разрешить ли пользователю масштабирование, значение «нет» или «да», нет означает не разрешено, да означает разрешено |
| target-densitydpi | Значение может быть числом или одной из строк high-dpi, medium-dpi, low-dpi, device-dpi. Поддерживается в Android, когда target-densitydpi=device-dpi, 1px в css будет равен 1px в физических пикселях. |
Возвращаясь к сценарию приложения, основной целью использования этого тега является адаптация к мобильному терминалу, как правило, создание страницы, специально предназначенной для мобильного терминала. Поэтому, когда мы задаем вьюпорт макета, мы, конечно же, надеемся, что размер этого вьюпорта будет равен идеальному вьюпорту.
Спрос дал понять, давайте посмотрим, как мы используем таблицу выше свойств для достижения.
использовать ширину
<meta name="viewport" width="device-width">
Эта ширина используется для установки ширины области просмотра макета. Мы устанавливаем его значение в ширину устройства, что является фактической шириной устройства. Ширина идеального окна просмотра равна ширине устройства, поэтому этот код устанавливает размер идеального окна просмотра. можно использовать отдельноwindow.innerWidthа такжеdocument.document.clientWidthПроверить:
Конечно, пока вы довольны, вы также можете установить другие значения, например, установить ширину на 1000, тогда окно просмотра макета будет больше, чем визуальное окно просмотра, и при просмотре будет полоса прокрутки. При его реализации лучше всего добавитьinitial-scale=1.0, который не позволяет браузеру масштабировать страницу.
Использовать масштаб
<meta name="viewport" initial-scale="1.0">
Initial-scaleИспользуется для установки размера окна просмотра макета относительно идеального окна просмотра при первой загрузке страницы. Конкретная формула расчета:
layout viewport = ideal viewport / scale
scale = ideal viewport / layout viewport
Следует отметить, что с настройкой масштаба, независимо от расчетного значения окна просмотра макета, в конечном итоге оно будет автоматически масштабировано браузером, чтобы соответствовать размеру визуального окна просмотра, и полосы прокрутки не появятся. В частности, посмотрите на следующий пример, мы устанавливаем размер красного поля на 100x100px и размер шрифта на 32px.
initial-scale=1.0
Установите значение масштаба на 1,0, тогда размер окна просмотра макета будет равен размеру идеального окна просмотра:
В настоящее время размер отображаемого красного поля составляет 100 пикселей, а размер шрифта — 32 пикселя.
initial-scale=0.5
Установите значение масштаба на 0,5, тогда размер окна просмотра макета будет в два раза больше размера идеального окна просмотра, который составляет 750 пикселей:
Но браузер масштабирует окно просмотра макета, чтобы оно соответствовало размеру визуального окна просмотра. Для окна просмотра макета, которое уже является визуальным окном просмотра размером 750 пикселей, его необходимо масштабировать в 0,5 раза по сравнению с предыдущим размером, чтобы он соответствовал точно 375 пикселей. Таким образом, красный прямоугольник размером 100 пикселей будет иметь размер всего 50 пикселей, а шрифт соответственно уменьшится наполовину. Если размер чертежа проекта составляет 750 пикселей, размер стиля может быть указан в соответствии с чертежом проекта.Наконец, пока установлен масштаб 0,5, визуальный эффект будет уменьшен.
Размер визуального окна, напечатанного с помощью window.innerWidth, здесь неверен, а размер визуального окна, напечатанного с помощью screen.width, правильный, Конкретная причина в Интернете не найдена. Студенты, которые знают это, могут оставить сообщение в области комментариев~
initial-scale=2.0
Установите значение масштаба на 2, тогда размер окна просмотра макета будет вдвое меньше идеального окна просмотра, то есть 188 пикселей:
Точно так же браузер автоматически изменит масштаб. Первоначально окно просмотра макета составляло 188 пикселей, поэтому его необходимо удвоить, чтобы заполнить визуальное окно просмотра. На этом этапе красная рамка размером 100 пикселей будет увеличена до 200 пикселей, а размер шрифта будет увеличен до 64 пикселей.
использовать одновременно
Можно реализовать как ширину, так и масштаб, но совместимость отличается. Наша цель — настроить окно просмотра макета на идеальное окно просмотра. Для совместимости со всеми устройствами существуют следующие решения:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
Если размеры двух параметров различаются, будет использоваться больший. Установка ширины на ширину устройства, а затем установка значения масштабирования на 1 полностью ограничивает размер окна просмотра макета до визуального окна просмотра. Другие свойства используются для управления масштабированием. На самом деле установитьmaximum-scale=1.0, minimum-scale=1.0это как настройкаuser-scalable=no. Если масштабирование не отключено, размер области просмотра компоновки все равно будет изменяться при масштабировании.
резюме
Цель использования окна просмотра — установить размер окна просмотра макета, чтобы его можно было правильно отображать на мобильных устройствах.