Mobile website html element too wide

开发者_C百科I'm designing a mobile version of my website, which should be like a mobile application.

The problem is that there is a strange width to my html element in my mobile browser. I have tried setting body and html to width:480px; and the content is 480px but even then there is a lot of whitespace next to the content (estimated at about 300px). The effect of this is also that the website is not zoomed to the content but to the content + the whitespace and you first have to zoom in to properly use the website.

Ofcourse I want to use width:100%; so it renders well on different screen sizes.

Does anyone know what's going on or how to fix it?

Edit The html code is just straightforward xhtml transitional, nothing special. In the css I have:

body, html {
width:480px !important;}

But if I would not set a width to those it should work right? I also don't set a width for any other elements (other than like buttons 100px and things like that) and if I view the mobile version on my computer no elements seem to be wider than the body.

Have you add the viewport meta tag ?

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