Комментарий: С популярностью высококлассных мобильных телефонов (Andriod, iPhone, iPod, WinPhone и т. Д.) Разработка мобильного интернета также привлекает все больше и больше внимания от людей. Использование HTML5 для разработки мобильных приложений является лучшим выбором. Тем не менее, каждый телефон имеет разные разрешения и размеры экрана. Как может быть разработано приложение или размер страницы, чтобы быть подходящим для использования в различных высококачественных телефонах? Изучите HTML5 ViewPort
Введение синтаксиса Viewport:
<!- HTML Document->
<Meta name = ViewPort
Содержание =
высота = [pixel_value | настройка устройства],
ширина = [pixel_value | ширина устройства],
начальная масштаба = float_value,
минимальный масштаб = float_value,
максимальный шкал = float_value,
Пользовательский масштаб = [Да | нет] ,
Target-DensityDpi = [dpi_value | Устройство DPI | High-DPI | средний DPI | низкий DPI]
/>
Пояснение параметра:
ширина
——-контролирует размер просмотра, который может быть указан как значение или специальное значение, такое как ширина устройства, которое является шириной устройства (единицы пикселей CSS при масштабировании до 100%.
высота
—— - Соответствует ширине, указание высоты.
Целевая плотностьда
— - Плотность пикселя экрана определяется разрешением экрана и обычно определяется как количество точек на дюйм (DPI). Android поддерживает три экранных пиксельных плотности: низкая плотность пикселей, плотность пикселей среднего пикселя и высокая плотность пикселей. Экран с низкой плотностью пикселей имеет меньше пикселей на дюйм, в то время как на экране с высокой плотностью пикселей больше пикселей на дюйм. Browser Android и WebView имеют среднюю плотность пикселей по умолчанию.
Ниже приведен диапазон значений атрибута Target-DensityDPI
Device-DPI: используйте исходный DPI устройства в качестве целевого DP. Увеличение по умолчанию не происходит.
Высокий DPI: используйте HDPI в качестве целевого DPI. Устройства средней и низкой плотности пикселей соответственно уменьшаются.
Средний DPI: используйте MDPI в качестве целевого DPI. Устройство с высокой плотностью пикселей увеличивается соответственно, и устройство плотности пикселей соответственно уменьшается. Это целевая плотность по умолчанию.
Низкий DPI: используйте MDPI в качестве целевого DPI. Устройства средней и высокой плотности пикселей усиливаются соответственно.
<значение>: укажите конкретное значение DPI в качестве целевого DPI. Диапазон этого значения должно быть между 70–400.
<!- HTML Document->
<meta name = viewport content = target-densitydpi = device-dpi />
<meta name = viewport content = target-densitydpi = High-DPI />>
<meta name = viewport content = target-densitydpi = medium-dpi />
<meta name = viewport content = target-densitydpi = low-dpi />
<meta name = viewport content = target-densitydpi = 200 ″ />>
Чтобы предотвратить масштабирование ваших страниц Android Browser и WebView на основе плотности пикселей различных экранов, вы можете установить целевую плотность DPI в виде видового порта на Device-DPI. Когда вы это сделаете, страница не будет масштабироваться. Вместо этого страница отображается на основе плотности пикселей текущего экрана. В этом случае вам также необходимо определить ширину просмотра, чтобы соответствовать ширине устройства, чтобы ваша страница могла адаптироваться к экрану.
начальная масштаба
— - Единой масштабирование. То есть начальный уровень масштабирования страницы. Это значение с плавающей запятой, множитель размера страницы. Например, если вы установите начальное масштабирование на 1.0, веб -страница будет отображаться с разрешением 1: 1 целевой плотности. Если вы установите его на 2.0, то эта страница будет увеличена до 2x.
максимальная масштаба
— - Максимум Zoom. Это максимально допустимая степень масштабирования. Это также значение с плавающей запятой, которое указывает на максимальный множитель размера страницы по сравнению с размером экрана. Например, если вы установите это значение на 2.0, эта страница может быть увеличена до 2 раза по сравнению с целевым размером.
Пользовательский масштаб
— - пользователь корректирует масштаб. То есть, может ли пользователь изменить уровень масштабирования страницы. Если установлено да, пользователь позволит ему изменить его, в противном случае это нет. Значение по умолчанию - да. Если вы установите его на NO, как минимальное, так и максимальное масштаб будет игнорировано, потому что масштабирование просто невозможно.
Все значения масштабирования должны быть в пределах диапазона 0,01–10.
Пример: 1. Установите ширину экрана на ширину устройства, запрещая пользователям вручную настраивать масштаб
<meta name = viewport content = width = width Device, пользовательский scalbable = no />
2. Установите плотность экрана на автоматическое масштабирование высокой частоты, средней частоты и низкой частоты и запрещает пользователям вручную регулировать масштабирование
<meta name = viewport content = width = width Device, Target-DensityDpi = High-DPI, начальная масштаба = 1,0, минимальная шкала = 1,0, максимальная шкала = 1,0, пользовательский масштаб = нет/>