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

css mobile width mobile-website screen-resolution
akv picture akv · Nov 13, 2009 · Viewed 7.6k times · Source

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

tnm8 picture tnm8 · Nov 13, 2009

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.

Related questions

@Media min-width & max-width

I have this @media setup: HTML: <head> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> CSS: @media screen and (min-width: 769px) { /* STYLES HERE */ } @media screen and (min-device-width: 481px) and (max-device-width: 768px) { /* STYLES HERE */ } @…

Read More
Media Queries: How to target desktop, tablet, and mobile?

I have been doing some research on media queries and I still don't quite understand how to target devices of certain sizes. I want to be able to target desktop, tablet and mobile. I know that there will be some …

Read More
Make an image responsive - the simplest way

I notice that my code is responsive, in the fact that if I scale it down to the size of a phone or tablet - all of the text, links, and social icons scale accordingly. However, the ONLY thing that …

Read More