All geek questions in one place

IPhone 3/4 Pixel Enhancement

My question is, the client needs a mobile site, and it should display a pixel perfect for mobile devices (emphasis on the iPhone).

I have a .PSD design with a width of 640 pixels.

This website tells me that older iPhones (<= 3) have a width of 320 pixels and newer (> = 4) have a width of 640px.

My question is: how to create a single page that will appear on older and newer devices? I know that new versions have a retina display, so I leave the width and adjust everything to 640 pixels or scale the .PSD to 320 pixels and adjust everything to that?

Thanks!

+4
source share
1 answer

You will need to use the meta viewport tag so that the browser knows in order to calculate the dimensions based on the device. Then define your css classes using percentages (not pixels).

An example is as follows:

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

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

If you need to load different images for different screen densities, you can try using window.devicePixelRatio to determine the screen density, and then use javascript to load the correct image.

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

+1
source

Source: https://habr.com/ru/post/1491867/

More articles:


All Articles