9

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.

howard10
  • 1,851
  • 2
  • 14
  • 21
  • After more research and experimentation the availWidth being 300 does make sense - it's the height minus the 20px status bar. In other words, minus the OS chrome and not the browser chrome. The value was also incorrect for an older iOS version and so I wouldn't recommend relying on it too much. – howard10 May 10 '12 at 15:40
  • Check my answer to similar question, might help a little http://stackoverflow.com/questions/8205812/jquery-js-ios-4-and-document-height-problems – Dmitry Semenov Mar 30 '13 at 11:41

1 Answers1

10

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

Samuli Hakoniemi
  • 18,740
  • 1
  • 61
  • 74
  • Having read [this](http://tripleodeon.com/2011/12/first-understand-your-screen/), I was coming to similar conclusions. Thanks for pointing me in the right direction. – howard10 May 09 '12 at 08:46