Fullscreen on Safari iOS7

Question

I am developing a mobile website using Sencha Touch. In iOS7 Safari, I cannot make the top address bar and toolbar below. Sencha is used to handle this before iOS6, but some recent changes in iOS7 are causing this problem.

http://java.dzone.com/articles/safari-ios-7-and-html5
I read the link above and it seems to be also a problem for HTML5 games and several other applications. Old window.scrollTo () that worked for iOS6 no longer works

Please do not close or close the question, as I searched all day and I did not find anything useful.

Answer 1

Add minimal-ui to your viewport meta tag, this will hide its address bar and browser controls in iOS7 safari:

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> 

Additional information about iOS7 and full-screen mode for mobile sites: http://blog.initlabs.com/post/81716286465/how-to-display-websites-in-fullscreen-mode-in-ios7

Answer 2

With iOS 7, I don’t think you really have a choice. Obviously, Apple does not want developers to do this anymore, and even if someone finds another workaround, they probably won’t stay that long.

Honestly, I think getting full-screen features is a fair compromise for users to install the application on their home screen. Obviously, there are certain cases when this is not so, but I guess that I understand this to one degree or another. You should still add the following meta tag, and it will be fullscreen after adding to the main screen:
<meta name="apple-mobile-web-app-capable" content="yes">

There are some good libraries that add an “add to desktop” prompt that you can customize to be fairly unobtrusive with custom messages. In this case, it is best to accept the change ...