Going full screen on iPhone 5

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?

IMG_3547-1

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:

Screenshot_19_03_2013_11_03

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:

Screenshot_19_03_2013_11_04

And this is the result:

IMG_3775

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:

1
  <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:

Screenshot_20_03_2013_00_13

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.

Happy weaving!

2 Responses to “Going full screen on iPhone 5”

Leave a Reply