Height of the iPad Safari viewport

Question

1. The viewport of the iPad is 980 pixels wide. What's the height?
2. In Safari we must add the address and the new taps. What is the height Safari in landscape mode?
3. There is a media query to fit the web to the width - is there a way to fit the web to the height?

Solution

Below are the answers;

1. You are right. The default viewport on both iPhone/iPad is 980px. There is no default viewport height, as such. You can change the width/height using;

   <meta name="viewport" content="width=device-width, height=device-height" >
   

2. I could not quite understand the question. But yes, since the iPad resolution is 1024x768px, So in landscape mode, the height should be around 768px (minus the address bar height which should be around 40px or so)

3. The way most browsers work is they allow to set the width and height is adjusted accordingly (based on other factors including initial zoom level as well). So you need to work with setting width most of the times.

Comments

[Chris Wagner]

There is more than the address bar to account for, you have the status bar (20px) plus the chrome that Safari brings along which is variable, in iOS4/5 the user can turn on or off the bookmark bar which appears to be about 30px tall, then there is the address bar which is probably about 40-50px tall. Then in iOS5 there is the tab-bar, which appears to be another 30px. I measured the chrome on iOS5 with bookmark bar and tabs and it is ~125px, so your viewport is about 643 pixels high in landscape mode.

[copenndthagen]

Yes right...So there is no direct way of determining the exact available viewport height...

[Chad W]

You can get a pretty good set of dimensions by visiting whatsmy.browsersize.com. When I visit that site on my iPad in Safari, it tells me the browser is 981px X 644px.

[Tom]

This seems to say that the browser always thinks it's in portrait model