CODEWITHSUNDEEP
androidhtmlcssmobile
Denoteone
Denoteone

Reputation: 4055

Optimize web page for mobile

I am trying to get my webpage to show zoomed in when the user browses to it. The whole page should only be 320px wide aligned left all the content in one column. but when I go to the page the site does not look good until the viewer taps on the screen to zoom and even then they can scroll horizontally (and see nothing)

How can I auto zoom the page?

Should I align center everything?

my css and html is below:

* {

margin: 0;

padding: 0;

}
body.body_sp{background-image:url(../images/content_sp.jpg);background-repeat:repeat-x;background-repeat:repeat-y;width:320px;}
#head_sp{width:320px;height:127px;}
#content_sp{width:320px;}
#footer_sp{width:320px;}

h1.sp_h1{margin:10px 0 20px 5px;text-align:left;}
p.sp_p{margin:20px;letter-spacing:.5px;line-height:16px;font:13px arial;}
p.sp_p a{color:red;}

you can see my html here http://patriotsar.com/patriot_droid.php

Upvotes: 1

Views: 1426

Answers (1)

damon
damon

Reputation: 1085

Try adding these to your < head >

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> 
<meta name="apple-mobile-web-app-capable" content="yes" />

Upvotes: 3

Related Questions