Setting Width by Pixel for Mobile Phones

Question

Most high-end smartphones have a 720 X1280 or 640 X 1136 resolution these days.

If I set the width of an img element to 360px, will it fill half the screen on these phones? If so, do I have to use different layouts for different resolutions for mobile phones?

What about font-size ? If you set it by pixel, will smartphones interpret it literally? A 10px font size will be big enough in a 320 X 480 screen, but unreadable in a 720 X1280 resolution.

Answer 1

There are many ways to have a layout on mobile devices for different resolutions, one quick and time-effective way to get started with is to code your layout with your desired screen width in mind, and then have this line in your header, where 720 will be the width you coded for originally:

<meta name="viewport" content="width=720, user-scalable=no" />

The browser will scale the layout to fit its screen.

You can have the line as the following too:

<meta name="viewport" content="width=720, user-scalable=yes" />

This will enable the user to zoom in (and out)

With this, you can have a maximum zoom defined and permitted for the user:

<meta name="viewport" content="width=720, maximum-scale=1, user-scalable=yes" />

With maximum-scale=1 you allow the user to zoom in up to the original width of the layout and no further.

Answer 2

yeah if you work on pixel thats what android will do. however highly not recommended. DPI is a much better unit.

If so, do I have to use different layouts for different resolutions for mobile phones?

not really

If you set it by pixel, will smartphones interpret it literally?

Yeah they will interpret it in px, but again not recommended