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开发者_StackOverflow中文版 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

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" />