Mobile website

[xoggoth]

Trying to do a mobile version of my little business website.

Sorted the basic layout inside a fixed width div so it all looked ok at 320x480, now I'm doing some "real" testing using the Opera Mobile Emulator with mixed results. Looks just as I expect on a number of larger screen devices eg HTC - One S = 540x960 but not on some others, content does expand, but not to the full width, so that some items are misaligned.

Got all the viewport header and @viewport CSS as required which, as I understand it, should make all item widths set as px expand to fit screen so not quite sure why some (emulated) devices don't work. Wondering whether I'd be better just to put all widths as % and text sizes as em.

Cheers for any answers.

PS In case I got something wrong, using this:
<meta name=viewport content="width=device-width, initial-scale=1">
CSS:
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

[xoggoth]

Hmm not mobile experts here then!

Solution seems to be to set % width on everything except fonts. Leave those as px and use the viewport stuff. Use small amounts of padding on some controls to make text clearer.

[Platypus]

Or use a 'responsive' Wordpress theme.

[monkeypaw]

"Fixed width div" is really the antithesis of responsive mobile design.

Also; your fonts should be EM's not PX's.