Комментарий: Использование HTML5 для разработки мобильных приложений является лучшим выбором. Тем не менее, каждый телефон имеет разные разрешения и размеры экрана. Как может быть разработано приложение или размер страницы, чтобы быть подходящим для использования в различных высококачественных телефонах?
С популярностью высококлассных мобильных телефонов (Andriod, iPhone, iPod, WinPhone и т. Д.), Разработка мобильного интернет-приложения также привлекает все большее внимание людей. Использование HTML5 для разработки мобильных приложений является лучшим выбором. Тем не менее, каждый телефон имеет разные разрешения и размеры экрана. Как может быть разработано приложение или размер страницы, чтобы быть подходящим для использования в различных высококачественных телефонах? Изучение использования HTML5 ViewPort может помочь вам сделать это ...
Введение синтаксиса Viewport:
<!-HTML Document->
<Мета
Содержание = "
высота = [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 Content = "Target-DensityDPI = Device-DPI" />
<Meta Content = "Target-DensityDPI = High-DPI" />
<Meta Content = "Target-DensityDpi = Medium-DPI" />
<Meta Content = "Target-DensityDPI = Low-DPI" />
<Meta Content = "Target-DensityDPI = 200" />
Чтобы предотвратить масштабирование ваших страниц Android Browser и WebView на основе плотности пикселей различных экранов, вы можете установить целевую плотность DPI в виде видового порта на Device-DPI. Когда вы это сделаете, страница не будет масштабироваться. Вместо этого страница отображается на основе плотности пикселей текущего экрана. В этом случае вам также необходимо определить ширину просмотра, чтобы соответствовать ширине устройства, чтобы ваша страница могла адаптироваться к экрану.
начальная масштаба
Начальное масштабирование. То есть начальный уровень масштабирования страницы. Это значение с плавающей запятой, множитель размера страницы. Например, если вы установите начальное масштабирование на 1.0, веб -страница будет отображаться с разрешением 1: 1 целевой плотности. Если вы установите его на 2.0, то эта страница будет увеличена до 2x.
максимальная масштаба
Максимальное зум. Это максимально допустимая степень масштабирования. Это также значение с плавающей запятой, которое указывает на максимальный множитель размера страницы по сравнению с размером экрана. Например, если вы установите это значение на 2.0, эта страница может быть увеличена до 2 раза по сравнению с целевым размером.
Пользовательский масштаб
Пользователь настраивает масштаб. То есть, может ли пользователь изменить уровень масштабирования страницы. Если установлено да, пользователь позволит ему изменить его, в противном случае это нет. Значение по умолчанию - да. Если вы установите его на NO, как минимальное, так и максимальное масштаб будет игнорировано, потому что масштабирование просто невозможно.
Все значения масштабирования должны быть в пределах диапазона 0,01–10.
пример:
(Установите ширину экрана на ширину устройства и запрещайте пользователям вручную настраивать зум)
<meta name = viewport content = width = width Device, пользовательский scalbable = no />
(Установите плотность экрана для автоматического масштабирования на высокой частоте, средней частоте и низкой частоте, и запретить пользователям вручную регулировать масштаб)
<meta name = viewport content = width = width Device, Target-DensityDpi = High-DPI, начальная масштаба = 1,0, минимальная шкала = 1,0, максимальная шкала = 1,0, пользовательский масштаб = нет/>