Need help on Coding CSS for mobile

[resting]

I've a page, which I'd set the body, html to width 310px.

I tried to view using iphone, its appearing at the top left of the screen and zoomed out.

I'm trying to achieve a full page display like A List Apart and The Onion

Those pages are fixed and can't zoom in or out.

How do I achieve that?

[Paul O'B]

You probably need this meta tag in the head:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

I use it in this demo which will fit an iphone.


Or the one used in the examples you linked to is this one.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

[Paul O'B]

See the mobile section and resources for more information.

[resting]

You probably need this meta tag in the head:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

I use it in this demo which will fit an iphone.


Or the one used in the examples you linked to is this one.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

Hi Paul,
That works great. Finally I can move on.

Now, 2 things I need to clarify, base href doesn't work on mobiles? As least not from what I see. The links are broken on my site.

Another, despite setting border=0 in table tag, borders are still coming out. And there are unsightly breaks in the table structure. vertical-align doesn't seem to work too. Does mobiles have problem displaying tables compared to a full browser??

Is there an app thats like firebug or web developer in FF to troubleshoot on mobiles?

[D3V4]

Now, 2 things I need to clarify, base href doesn't work on mobiles? As least not from what I see. The links are broken on my site.

It does work on mobiles.

[Paul O'B]

Hi Paul,


Another, despite setting border=0 in table tag, borders are still coming out. And there are unsightly breaks in the table structure. vertical-align doesn't seem to work too. Does mobiles have problem displaying tables compared to a full browser??

Is there an app thats like firebug or web developer in FF to troubleshoot on mobiles?

To remove the border use css eg. table,td {border:none}. I don't know how all mobiles handle it but it seems to work on the iphone. Usually though you would avoid using tables on mobile devices unless they are very small with only a couple of columns.

For testing n the iphone go to the apple site and download the developer sdk package (mac only) and one of the components is an iphone emulator although I don't know of any actual debugging tools.

Mobile testing is a bit like "try it and see" as there are so many differences.

[D3V4]

If you prefer not to download anything, here is a nice webapp that lets you test your mobile design in your browser, simulating the behavior of different types of devices: ProtoFluid. Rapid Prototyping of Adaptive CSS and Responsive Design.