Для какого разрешения должен быть оптимизирован мобильный сайт?

Question

У меня проблемы с пониманием работы мобильного разрешения. Из того, что я знаю, стандартное разрешение мобильного сайта составляет 320 пикселей в ширину. Проблема, кажется, связана с iPhone 4, который имеет разрешение экрана шириной 640 пикселей, но, тем не менее, отображает веб в 320 пикселей.

Какое решение здесь? Кодирую ли я 2 разных разрешения для экранов 320px и 640px? Как заставить iPhone 4 отображать 640px web?

Answer 1

Я обнаружил, что веб-сайты с минимальной шириной 320 пикселей будут хорошо смотреться на большинстве мобильных устройств высокого класса, таких как iPhone, Android и Nokia N97. Некоторые разрешения экрана большинства популярных устройств:

"iPhone 320 x 480"

"iPhone 4 320 x 480 (масштабируется в 2 раза)"

"HTC Legend 320 x 480"

Answer 2

Ну, как вы уже заметили, разрешение iPhone 4+ составляет 640 пикселей, но браузер отображает только 320 пикселей по ряду причин. Проверьте этот другой ответ для получения более подробной информации о том, как это происходит: Разрешение 320px для веб-приложений

Это также говорит о том факте, что вы можете указать область просмотра для веб-сайта, чтобы заставить его отображаться в 640px на iphone, но вы не должны этого делать, а просто удваивает разрешение на используемом изображении.

Answer 3

Поскольку число пикселей с iPhone 3 до iPhone 4 удвоилось, это означало бы, что каждый веб-сайт, оптимизированный для iPhone 3, был бы ... крошечным на дисплее. Следовательно, было введено devicePixelRatio, чтобы сохранить размер веб-сайтов (в мм или дюймах), удваивая физические пиксели, эффективно делая изображения и шрифты с двойным разрешением (сетчаткой) намного более резкими, но сохраняя старый шрифт CSS и размеры пикселей.

DevicePixelRatio составляет 2: 1 на iPhone 4 и 5. Это означает, что изображение, определенное в css с 100100px, на самом деле будет занимать 200x200 физических пикселей. Таким образом, вы все еще можете css-стиль страницы с общей шириной 320px; 320 провалов - независимые от устройства пиксели.

Обратите внимание, что devicePixelRatio также существует на Android, где оно варьируется от 1,5 до 3.

Дополнительная информация: http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html и http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html

Answer 4

Либо вы можете использовать адаптивный макет, как на этом веб-сайте (попробуйте уменьшить ширину окна браузера, чтобы увидеть, как сайт адаптируется).Этот дизайн также обсуждается в этом блоге .

. Или вы создаете отдельные макеты для разных разрешений, используя медиа-запросы .

.

Answer 5

Наиболее распространенные размеры экранов мобильных устройств: 320x240, 480x320, 800x480, 960x480, 1024x800 и 1024x768.

Answer 6

<link rel="stylesheet" media="all and (orientation:portrait)" href="/Content/portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="/Content/landscape.css">

Таким образом CSS будет загружаться отдельно для ландшафта и протрейта.

@media (min-width: 500px) and (max-width: 640px){}
@media (min-width: 320px) and (max-width: 400px){}

Вот как будет обрабатываться разрешение.

Answer 7

вы используете эту строку кода:

<link type="text/css" href="css/mobile.css" rel="stylesheet" media="only screen and (max-width: 480px)" />

Когда он обнаружит, что ваш экран имеет ширину менее 480 пикселей, он будет использовать этот CSS. Если нет, он будет использовать обычный CSS, который вы использовали до