Take the 2-minute tour ×

I am trying to make my webpage appear with page width equal to that of a phone screen. So, for example, the resolution of the html page would be the resolution of the phone screen viewing it. If it's viewed on computer, I want it to be shown in a div with white boarders on the side. So, I did this in my CSS:

html {
  max-width: 400px;
  margin: 0 auto;

but then the whole page just zoomed out on the iPhone screen, when the iphone screen has width less than 400px? Why? How can I fix this?

Update - screenshot as below. enter image description here

share|improve this question
Why not use width:100%? –  BingeBoy May 19 '13 at 20:08
@BingeBoy because when the page is viewed on larger screens (e.g. tablet / computer) I don't want them to see the whole content zoomed in really big. –  Sam Heather May 19 '13 at 20:40
You could use a media query and make the page responsive. –  BingeBoy May 19 '13 at 20:49

1 Answer 1


You could try messing around with a responsive theme.


//other stuff


//iphone is horizontal
    //other code!
//iphone is vertical
    //other code!
share|improve this answer

Your Answer


