Making a website web app capable is well-advised as it runs in full screen, can stay in full screen and gives a much better user experience on iPhones. But what about iPhone 5?
What about it? Well…. No body wants these letter boxes at the top and bottom of the mobile web app do they?
Not looking too good but runs perfectly on an iPhone 4 and 4S.
The key is in the viewport meta tag and this part in particular:
This is the standard viewport meta setup for a lot of sites but to provide full length screen to iPhone 5 it should be this:
And this is the result:
That’s much better. It’s on an iPhone 5 but doing it this way works perfectly on iPhone 4 & 5 so it would be better to do it this way forward.
Here’s the code:
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
Add this to your Rapidweaver theme’s index.html file or like this in Site Setup within Rapidweaver:
Hope this helps with a project and interested to hear below if you implement this and if it makes any difference during your testing on iPhone5.