Анализ тегов Viewport и связанного с ним использования CSS в мобильной разработке HTML5

В этой статье в основном представлены тег ViewPort и соответствующий анализ использования CSS в мобильной разработке HTML5. Viewport часто называют Viewport или Viewport и играет важную роль в мобильной компоновке и адаптации экрана. Друзья, которые это нужно, могут ссылаться на это.

Viewport (ViewPort), обычно упоминаемый на мобильном фронтальном положении, представляет собой область экрана, где браузер отображает содержимое страницы. Несколько важных концепций-это взаимосвязь между DIP (независимую от устройства Pixel Logic Pixel) и пикселями CSS. Здесь мы впервые понимаем следующие понятия.

Как правило, браузеры на мобильных устройствах по умолчанию устанавливают метатеги ViewPort, определяя виртуальный макет Viewport для решения проблемы ранней страницы дисплея на мобильных телефонах. iOS и Android в основном устанавливают разрешение этого Viewport на 980px, поэтому веб -страницы на ПК могут быть представлены в основном на телефоне, но элементы выглядят очень маленькими, и веб -страницы, как правило, могут быть вручную масштабированы по умолчанию.

Visual Viewport (Visual ViewPort) обеспечивает визуальную область физического экрана, физические пиксели дисплея экрана, тот же размер экрана, устройство с высокой плотностью пикселей, а аппаратные пиксели будут больше. Например, физические пиксели iPhone:

iPhone5: 640 * 1136

iPhone 6: 750 * 1334

iPhone6 ​​Plus: 1242 * 2208

Идеальный просмотр и падение (пиксели логики устройства)

Идеальный просмотр, как правило, это то, что мы называем разрешением экрана.

DIP (Pixel Logic Device) не имеет ничего общего с аппаратным пикселем устройства. Погружение занимает то же пространство на экране устройства любой плотности пикселей.

Например, аппаратные пиксели на экране Retina Display MacBook Pro: 2880 * 1800. Когда вы устанавливаете разрешение экрана на 1920 * 1200, значение ширины идеального просмотра составляет 1920 пикселей, а значение ширины DIP - 1920. Соотношение пикселя устройства составляет 1,5 (2880/1920). Связь между логической шириной пикселей и шириной физической пикселя (разрешение пикселей) устройства удовлетворяет следующей формуле:

Разрешение экрана мобильного телефона обычно не допускается. Как правило, это фиксированное значение, установленное производителем устройства по умолчанию. Другими словами, значение DIP - это значение идеального просмотра (то есть разрешение). Например, разрешение экрана iPhone:

iPhone5: разрешение 320*568, физические пиксели 640*1136, @2x

iPhone6: разрешение 375*667, физические пиксели 750*1334, @2x

iPhone6 ​​Plus: разрешение 414 * 736, физические пиксели 1242 * 2208, @3x (обратите внимание, что фактическое отображаемое соотношение изображения уменьшается до 1080 × 1920, конкретные причины будут введены в конце нашей статьи)

CSS Pixels (PX), используемые для макета страницы. Размер пикселя стиля (например, ширина: 100px) указан в пикселях CSS. Соотношение пикселей CSS к погружению - это соотношение масштабирования веб -страницы. Если веб -страница не масштабирует, то Pixel CSS соответствует DIP (Logic Device Pixel).

Используйте Meta Tag для управления макетом для управления

Во -первых, давайте посмотрим на экстремальные свойства Meta Meta Porepport: