Совершенство iPhone 3/4 пикселя

Question

У меня есть вопрос, клиенту нужен мобильный сайт, и он должен отображать пиксель на мобильных устройствах (акцент на iPhone).

У меня есть .PSD-дизайн, который имеет ширину 640 пикселей.

This сайт говорит мне, что более старые iPhone (< = 3) имеют ширину 320 пикселей и более новые (> = 4) имеют ширину 640 пикселей.

Мой вопрос: как создать единую страницу, которая будет отображаться на старших и более новых устройствах? Я знаю, что в новых версиях есть сетчатый дисплей, поэтому я оставляю ширину и настраиваю все на 640 пикселей или масштабирую .PSD до 320 пикселей и настраиваю все на это?

Спасибо!

Answer 1

Вам нужно будет использовать тег meta viewport, чтобы браузер знал, что рассчитать размеры на основе устройства. Затем определите свои классы css, используя проценты (а не пиксели).

Пример выглядит следующим образом:

<meta name="viewport" content="width=device-width"> 

И блоге: http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

Если вам необходимо загрузить различные изображения для разных плотностей экрана, вы можете попробовать использовать window.devicePixelRatio, чтобы определить экран плотность, а затем использовать javascript для загрузки правильного изображения.

http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html