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
Post a Comment