IPhone 4+ по умолчанию имеет разрешение 320 пикселей для веб-приложений, я хочу использовать полный 640px

iPhone 4+ по умолчанию имеет разрешение 320 пикселей для веб-приложений, я хочу использовать полный 640px.

Могу ли я изменить поведение iPhone 4+, чтобы сообщить реальное разрешение?

EDIT: Поэтому я могу использовать

<meta name="viewport" content="width=640" />

но как я могу убедиться, что это iPhone 4+, прежде чем устанавливать этот тег?

Ответ 1

Короткий ответ: вы можете проверить пользовательский агент и установить метатег с помощью JavaScript.

Долгий ответ: не делайте этого. С тех пор я тоже очень смутился, когда начал заниматься мобильными телефонами. IPhone 4 (и другие устройства с высоким разрешением) фактически отображают ту же ширину страницы, что и их предшественники. Вероятно, это связано с тем, что сайты повсюду выглядели бы совсем маленькими и, вероятно, перепутались, если бы сделали иначе. Однако есть разница. Телефоны с высоким разрешением просто отображают все с более высоким разрешением (но одинаковые размеры).

Это не имеет значения для таких вещей, как цвет текста и фона, но вы обнаружите, что изображения не выглядят четкими на iPhone - это потому, что они изменяются. То, что я делаю, - это удвоить разрешение на изображениях, придать им фиксированный размер и высоту их размеру "не высокого уровня" и использовать -webkit-background-size: 100% 100%;. Таким образом, старые устройства отображают его как обычно, а устройства с высоким разрешением выглядят четкими и приятными. Предостережение заключается в том, что это делает размер файла изображения более крупным.

Для получения дополнительной информации о том, почему пиксель не всегда является пикселем, см. эту ссылку: http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

Кроме того, если вы хотите настроить таргетинг на устройства с высоким разрешением специально с помощью CSS. Вы можете использовать медиа-запрос:

@media screen and (-webkit-device-pixel-ratio: 2) { 
  body{
     background-color: red;
  }
}