iPad not scaling site down website correctly in portrait orientation

Question

This is a bit of an odd one and was wondering if anyone had a solution.

We're building a few websites just now that are over 1000px in width and for some reason when the iPad loads them up in portrait mode it's scaling them down but leaving some width on the right so you have to scroll just a little over to see everything.

I added <meta name="viewport" content="initial-scale=0.7;" /> which does fix the problem but when loaded in landscape the user is presented with a small site to start with and can zoom out too far.

An example of this can be seen on one of my personal development sites. This isn't live yet so please ignore any bugs http://www.dundeewebstandards.com/events/

Thanks,

Chris

Answer 1

I had this same problem and tried all of the proposed solutions that I could find, to no avail. Finally, I figured it out... If the height of your page is less than 1024px and the width is greater than 768px, the native zoom functionality does not work as expected. This is also true if the width of your page is greater than it's height. Try using a media query to add a min-height to your page. Here is the code I used to fix this problem...

#page-container{
    width: 1200px;
    margin: 0 auto;
}
@media screen and (min-width: 768px) {
    #page-container{
        min-height: 1240px;
    }
}