css - iPhone 3/4 pixel perfection -


i have question, client needs mobile website , has display pixel perfect on mobile devices (emphasis on iphone).

i have .psd design 640px wide.

this website tells me older iphones (<= 3) have width of 320px , newer ones (>= 4) have width of 640px.

my question - how make single page display same on both older , newer devices? know newer versions have retina display, leave width , adjust 640px or scale .psd down 320px , adjust that?

thanks!

you'll need use meta viewport tag browser knows calculate dimensions based on device. define css classes using percentages (not pixels).

an example looks this:

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

and blog post: http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

if need load different images different screen densities, can try using window.devicepixelratio determine screen density , use javascript load correct image.

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


Comments

Popular posts from this blog

How to mention the localhost in android -

php - Calling a template part from a post -

c# - String.format() DateTime With Arabic culture -