Моя веб-страница показывает одинаково в iPhone4 и iPhone4S

Question

У меня есть мобильное веб-приложение, в котором я рисую графику с использованием CSS3 / HTML5.

Хорошо выглядит на iPhone3G и iPhon3GS, поскольку у них одинаковое соотношение пикселей.

Однако, когда я открываю ту же веб-страницу на iPhone4 или iPhone4S, она выглядит точно так же, как на iPhone3G, с учетом лучшего соотношения пикселей.

Мой вопрос:

Могу ли я заставить устройство iPhone4 использовать его соотношение пикселей вместо соотношения пикселей iPhone3G?

Если я сохраню графику на диске устройства и открою ее в Camera Roll, я увижу разницу на iPhone3G и iPhone4, поэтому мне бы хотелось увидеть ее и в Интернете.

Answer 1

Правда в том, что iPhone 4 поставляется с экраном с разрешением 326 точек на дюйм, что вдвое больше оригинального экрана iPhone.Это означает, что это новое устройство имеет двойную ширину, двойную высоту при том же физическом размере экрана.Вот почему Apple решила предоставить своему браузеру те же размеры CSS, области просмотра и JavaScript, что и для устройства с низким DPI, 320x480, и создала соотношение пикселей, равное 2. Это означает, что для каждого пикселя будут отображаться четыре реальных пикселя (2-кратный зум).Поэтому ваш сайт будет отображаться одинаково в iPhone 3GS или iPhone 4. Если вы все еще хотите показывать изображение с высоким разрешением, вы можете использовать условие медиа-запроса -webkit-min-device-pixel-ratio:

<link media="all and (-webkit-min-device-pixel-ratio:2)" href="iphone4.css" type="text/css" rel="stylesheet" />