Css page width and mobile phones

Before I posted this I did a google search and a sitepoint search and realise just how complex it is to get a consistent layout for a website via a mobile phone.

But much to my delight a site that a was working on with help from sitepoint members renders beautifully on my blackberry. This is the site www.davidclick.com

So I wonder is setting the page width to 900px a good number to get a fair layout on a mobile device or is it as i suspect far more complex to ge control of layout.

Thanks in advance :slight_smile:

Whoa … much too big for mobiles.

Bear in mind that top-end phones will ignore your handheld stylesheet and will try (pretty successfully) to emulate a full-blown desktop browser. There’s not a lot you can do to specifically target them without sniffing out the user-agent string, and that’s a headache and a half. The best you can do for them is to write well-structured valid code so they can read it properly.

The mobile phones that will really benefit from a specific design/stylesheet are the less capable ones. These will generally be the ones with smaller screens, and the ones that can’t rotate the screen to landscape mode. See list of mobile screen sizes. If you’re designing a mobile version of your site, you should go for a cut-down linearised version that will work on these low-end phones.

And then you have to deal with bizarre browser behaviour. Running Opera Mobile on my phone (with a 360×640px screen), it will display pages with a minimum width of about 840px (ie, wider than the screen even in landscape mode) but it will keep the main content block to the width of the screen where no other dimensions have been set. So you end up with the odd situation of the text being constrained to the size of the screen but the background extending way off to the right of it.

You can use media queries to target mobiles (or rather, to target those devices with small screens)

I usually go for a width of 100% for them, that way your design is nice and fluid whatever phone you use