iPhone Safari screen.availHeight and statusbar / toolbar / addressbar

Question

I'm trying to get the available screen size in iPhone Safari in order to shrink a container to the height of the screen, minus the statusbar and toolbar.

Since iOS always returns screen dimensions as though the phone is in portrait orientation, I'm using screen.availWidth to work out the height in landscape. The following are the dimensions returned:

screen.width; //320
screen.availWidth; //300

The 20px difference accounts for the top statusbar on the phone but doesn't take into account the button bar (toolbar) at the bottom of the screen.

Is there any property that I can use that would return 268px?

I would just do (screen.availWidth - 32) but there's a chance the user will add the site as a desktop bookmark, in which case this bar won't be present and the 300px value would be correct.

Answer 1

I don't have the exact answer, but you can determine whether user is in Mobile Safari or in desktop bookmark with navigator.standalone property. With this you could decide whether to substract 32px or not.

Edit: Found the answer. Use <meta name="viewport" content="user-scalable=no, width=device-width, height=device-height" /> and then the correct value can be get from window.innerWidth / window.innerHeight