What is the design best practice for setting the page width for mobile web pages?

Question

Different browsers on different phones have different screen resolution.

Is there a best practice in the community to set the width to a standard size, so that it works on most moderns phones and browsers?

Answer 1

There's no easy way to ensure pixel-perfect accuracy across mobile browsers (actually, there's no easy way to do that with any browser). There are, however, some methods to help with that kind of work. For example, mobile Safari for the iPhone supports a 'viewport' meta tag that allows you to specify attributes like width. Here are some examples of usage:

<meta name="viewport" content="width = 750px" />

<meta name="viewport" content="initial-scale=2.5, user-scalable=no" />

Apple has some information here, and you'll find a lot more information across the web.

Answer 2

IMHO the best practise is to get along without too many assumptions about width and resolution of the clients device.

Mostly those devices have browsers geared towards displaying/flowing/reducing webpages. If at all possible, let the browser do the work.