My test app consisted on a fixed positioned header, an optional fixed positioned footer, and a scrollable content. I wanted it to fill the whole screen space, of course, both in portrait and landscape mode.
As anyone knows, it's possible to hide the navigation bar on iPhones's safari, and that gives us 60 extra pixels. That's a lot. But there's one thing... the navigation bar can only be hidden (it's really scrolled up) when the content is larger than the available screen space.
I thought... on orientationchange event I must only read window.innerHeight to get the total window height, adjust my div sizes, and hide the navigation bar. Fail
window.innerHeight reported the available window height considering the navigation bar was there...
Easy then, first I hide the navigation bar, and then read window.innerHeight. Results?
When switching from portrait to landscape mode everything was right. But when switching from landscape to portrait it wasn't.
Of course, when switching, the content height was the total height in landscape mode, 300px (the always present top status bar is 20 pixels height), and of course it wasn't enough to scroll the navigation bar up. What to do?
Easy. First, set the content height to screen.height (which is always 480 in the iphone) so it is high enough. Then, hide the address bar, and once hidden, set the right height depending on the window.innerHeight (which will be 460 in portrait mode when the navigation bar is hidden, the whole screen.size minus the 20 pixels of the status bar which is always visible).
Very Good, This is excellent information which is shared by you. This information is very meaningful and magnificent for us to increase our knowledge about it. Always keep sharing this kind of information. Thank you. apple macbook pro repair
ReplyDeleteYour blog is very interesting. Your level of thinking is good and the clarity of writing is excellent. I enjoyed so much to read this post. I am also a blogger, you can follow my blog here iPhone App Development Services
ReplyDeleteI owe you a debt of gratitude because the article you've posted here is fantastic. I learned something useful from this article. Thank you for sharing about iphone fix sydney. Continue to post.
ReplyDeleteExtremely useful information which you have shared here. This is a great way to enhance knowledge for us, and also helpful for us. Thankful to you for sharing an article like this. electronics parts distributor Florida
ReplyDeleteI admire this article for the well-researched content and excellent wording. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much.Vertu Phone Official Website site.
ReplyDelete