Обсуждение по размеру веб -сайтов на веб -сайте HTML5 Building Touch Screen

Эта статья разделена на две части. В первой части обсуждается осуществимость кроссплатформенных веб-сайтов, а во второй части обсуждается, как настроен ViewPort.

Это правда, что ширина и высота метки могут быть адаптируемыми, мы можем сделать это очень рано. Но вы обнаружите, что многие традиционные веб -сайты ПК по -прежнему исправляют ширину. (Taobao использует ширину 1000 пикселей, Sohu 950px ...) Почему мы не позволяем веб -сайту адаптироваться к ширине и высоте? Это потому, что если мы позволим ширине метки протянутой растягиванием браузера, это приведет к очень плохому опыту: вы не хотите, чтобы ваша левая полоса превратилась в лапшу, когда браузер увеличивается до 100px; Вы также не хотите, чтобы ваш сайт выглядел как нетбук для ученика начальной школы, когда браузер перегружен. Следовательно, нереально полагаться на адаптацию на этикетке для достижения кроссплатформы и стоит за счет пользовательского опыта. Много раз мы должны исправить ширину и высоту.

Мы полагаемся на устройство HTML5, чтобы проверить, является ли текущее устройство мобильным телефоном или планшетом, и загружаем соответствующий CSS соответственно. Например: если вы обнаружите, что ваше устройство является планшетом, я могу отображать три столбца горизонтально, и если это мобильный телефон, я отобразим только один столбец. Это звучит не сложно, но это очень сложно реализовать. Нам нужно не только разработать несколько наборов шаблонов для разных устройств, но и обрабатывать размер изображения. В связи с этим мы можем увидеть, как Boston Globe использует HTML5 для реализации адаптивного дизайна.

В целом, достижение кроссплатформенных веб-сайтов слишком дорого и ограничено для большинства веб-сайтов. Независимо от того, зависит ли это, зависит от реальной ситуации веб -сайта.

Мобильные браузеры размещают страницу в виртуальное окно (ViewPort). Обычно виртуальное окно (ViewPort) шире, чем экран, поэтому каждая веб -страница не должна втиснуть каждую веб -страницу в очень маленькое окно (это уничтожит макет веб -страницы, которая не оптимизирована для мобильных браузеров). Пользователи могут видеть разные части веб -страницы посредством панорамирования и масштабирования. Мобильные браузеры представили метатеги Viewport, позволяя веб -разработчикам контролировать размер и масштабирование ViewPort.

Пиксели CSS: абстрактные единицы, используемые браузерами, в основном используются для рисования контента на веб -страницах.

Пиксели устройства: отображает минимальную физическую единицу экрана, каждый DP содержит свой собственный цвет и яркость.

Сколько пикселей CSS с эквивалентными значениями занимают на экране телефона, это не исправлено, это зависит от многих атрибутов. После анализа и резюме мы можем придумать формулу: 1 css pixels = (devicePixelRatio)^2 пиксели устройства (^2 означает Square. Что касается DevicePixelRatio, это будет объяснено позже).

PPI, иногда также называемый DPI, представляет количество пикселей на дюйм. Чем выше значение, тем выше дисплей может отображать изображения. (Примечание. Пиксели здесь относятся к пикселям устройства.) После того, как мы выясним, что означает PPI, мы можем легко понять метод расчета PPI. Нам нужно сначала рассчитать диагональные эквивалентные пиксели экрана мобильного телефона, а затем разместить диагональ (размер экрана мобильного телефона - это длина диагональной линии экрана мобильного телефона), и мы можем получить PPI. Для точных объявлений расчета вы можете обратиться к рисунку ниже. Что более интересно, так это то, что PPI iPhone 4, рассчитанная на основе формулы, составляет 330, что немного выше, чем 326, официально анонсированные Apple.

Аналогичным образом, в качестве примера принимая HTC G7, разрешение 480*800 и 3,7 дюйма рассчитывается как PPI 252.

Мы рассчитываем PPI, чтобы узнать, какой интервал плотности принадлежит устройство мобильного телефона, поскольку различные интервалы плотности соответствуют различным коэффициентам масштабирования по умолчанию, что является очень важной концепцией.

Из приведенного выше рисунка видно, что мобильные телефоны с PPI между 120-160 классифицируются как мобильные телефоны с низкой плотностью, 160-240 классифицируется как средняя плотность, 240-320 классифицируется как высокая плотность, а выше 320 классифицируется как сверхвысокая плотность (Apple дает ему поднятую ретину).

Эти плотности соответствуют конкретному значению масштабирования. Возьмите iPhone 4 или 4s, с которыми мы наиболее знакомы, их PPI-326, что представляет собой мобильный телефон сверхвысокой плотности. Когда мы пишем страницу с шириной 320px и размещаем ее на iPhone, вы обнаружите, что на самом деле это полная ширина. Это связано с тем, что страница дважды увеличивается по умолчанию, то есть 640px, в то время как ширина iPhone 4 или 4s составляет ровно 640px.

Картинка окружает тип высокой плотности, потому что это статистические данные телефонов Android. На внутреннем рынке телефона Android на устройствах высокой плотности приходится подавляющее большинство рынка. Это очень важный момент, и это также ключевой момент, на который мы должны обратить внимание при выполнении веб -приложений для Android.

Viewport имеет в общей сложности 5 атрибутов следующим образом:

<meta name = "viewport"

Содержание = "

высота = [pixel_value | настройка устройства],

ширина = [pixel_value | ширина устройства],

Начальная масштаба = float_value, минимальная шкала = float_value, максимальная шкала = float_value, максимальная шкала = float_value,

Пользовательский масштаб = [да | нет] ,

Target-DensityDpi = [dpi_value | Устройство DPI | High-DPI | средний DPI | Low-DPI] " />

Среди этих свойств мы фокусируемся на целевой плотности , которая может изменить масштабирование устройства по умолчанию. Средний DPI-это значение по умолчанию целевой плотности DPI. Если мы определим Target-DensityDpi = Device-DPI, устройство будет отображать страницу в соответствии с реальным DPI. Например, если изображение 320*480 помещено в iPhone 4, оно будет занимать экран по умолчанию, но если будет определено целевая плотность dpi = dvice-dpi, то изображение учитывает только за одну четверть экрана (половина квадрата), потому что разрешение iPhone 4 составляет 640*960.

Если мы сделаем страницу в соответствии с проектом проектирования в широком 320PX и не сделаем никаких настроек, страница автоматически масштабируется по ширине, равной экране мобильного телефона по умолчанию (это потому, что средний DPI-это значение по умолчанию, которое автоматически выполняется мобильными оборудованием). Таким образом, это решение простое, грубое и эффективное. Но есть смертельный недостаток. Для мобильных устройств с высокой плотностью и сверх высокой плотности страницы (особенно картинки) будут искажены, и чем более плотно, тем более искаженными они.

В этом решении мы используем Target-DensityDPI = Device-DPI, чтобы устройство мобильного телефона будет отображаться в соответствии с реальным количеством пикселей. В профессиональных терминах это 1 CSS Pixels = 1 пиксели устройства. Например, для iPhone с 640*960 мы можем создать страницу с 640*960, и на iPhone не будет прокрутки, когда она отображается на iPhone. Конечно, для других устройств также требуются страницы разных размеров, поэтому это решение часто используется для использования медиа -запросов для создания отзывчивых страниц. Это решение может быть идеально представлено в определенном разрешении, но с более различными разрешениями для совместимости, тем выше стоимость, поскольку для каждого разрешения требуются отдельные коды. Вот простой пример:

<meta name = "viewport" content = "target- DensityDpi = device-dpi, width = device-width" />

#header {

Фон: URL (средняя плотность-image.png);

}

@Media Screen и (-webkit -device-pixel-ratio: 1.5) {

/ * CSS для экранов высокой плотности */

#Header {founale: url (высокая плотность-image.png);}

}

@Media Screen и (-webkit -device-pixel-ratio: 0,75) {

/ * CSS для экранов низкой плотности */

#Header {founale: url (низкая плотность-image.png);}

Для подавляющего большинства устройств Android, характеристик высокой плотности и средней плотности, мы можем принять компромиссное решение: мы восстанавливаем проект проектирования шириной 480px, но система страниц производится шириной 320px (используя фоновый размер, чтобы уменьшить картину), а затем позволить странице автоматически масштабировать. Таким образом, телефоны с низкой плотностью имеют полосы прокрутки (в основном никто не использует этот вид телефона), телефоны средней плотности будут тратить небольшое движение, телефоны с высокой плотностью будут идеально присутствовать, а телефоны сверхвысокой плотности будут немного искажены (очень мало ультра-высоких телефонов Android). Преимущества этого решения очень очевидны: требуется только один набор проектных проектов и один набор кодов (здесь обсуждается только ситуация с телефонами Android).