This question already has an answer here:
In mobile Safari, website added to Home screen, shows gray bars on the top and bottom when navigating pages, how to make it full screen?
(1 answer)
Closed 1 year ago.
Have an iPad Web Application1 which will be saved to the user's home screen and function as an app.
We're using the below meta tags so it functions with as minimal UI as possible on iPad.
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
Initial load of the application is good with an expected small UI:
Minimal chrome
The issue comes when the user navigates to a new page. The Safari forward/back buttons appear, even if there is no history.
Expanded chrome
Question: is there any way to stop Safari from adding an expanded status bar?
This is a NextJS app if it helps, using the built in router.
1 https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
The manifest.json was not loaded for the application. This made pages after the first load add the extra chrome. Incorporating missing manifest.json fixed the problem.
Same as this question:
In mobile Safari, website added to Home screen, shows gray bars on the top and bottom when navigating pages, how to make it full screen?
Related
I am using Angular UI Router. Whenever I click on a link with ui-sref the address bar from ios mobile browser shows up. For example when I scroll down, the address bar hides and if I click on a link and the page transition finishes the ui address bar shows up instantly. This makes it less user friendly as the page suddenly shifts a little downwards because of the address bar.
This website has the same issue that I have.
I have found a website that doesn't have this issue although they are not using angular.
This does not happen on android chrome. And only happens in the ios safari. The version that I have tested in was ios 9.
I have tried overflow hidden but this is not the solution that I want because then the address bar is always visible.
What's triggering this behavior?
I have not tested this, but I remember having a similar issue a while back.
I think you could add this meta tag:
<meta name="viewport" content="minimal-ui”>
Check out these other posts: Post 1, Post 2.
Note: minimal-ui is no longer supported in iOS 8 and above (More info). However, not all users have upgraded to iOS 8, so there is still a reason to add it to your project.
This question already has answers here:
How do you keep an iPhone/iPad web app in full screen mode?
(6 answers)
Closed 8 years ago.
I'm trying to figure out the most efficient approach to tackle an issue. I have wonderful WP themed website that I want to show full-screen on my iPad. Here's how it currently operates:
Once a user has saved the website to their iPad via ‘Add to Home Screen’, the site will launch full-screen (absent any Safari interface) when that icon is pressed. However, a new tab is created with Safari interface items visible once the user clicks on any menu item. I want to keep the full-screen experience (without tabs) while the user remains within the site. I only need this to work when launched from home screen icon in the latest iOS.
1) What is causing the site to launch a new tab? Default mobile safari action due to lack of full-screen code, the way the nav URLs are coded, or other?
2) Is it just a matter of adding some header code to the remaining pages (via child theme or directly to the theme templates)?
Here is the website: http://www.sofla360.com
I've dabbled with the iOS full-screen code previously, but nothing very complicated nor with a WP theme. Figured I'd start here in case anyone had some insight on this topic.
Thanks!
The code I found here works with 99% of my WP-themed website. I created a child theme and placed the code in the head section of the header.php file.
I use the template Citizen Journal.
I don't know if it's just for this template but there is a quiet annoying problem.
The top menu doesn't appear correctly on the iPad.
I uploaded screenshot from the Desktop and the second on the iPad here:
http://imgur.com/a/yeNCY
You can see that the menu becomes a drop-down menu that is always open.
It blocks the view of the different pages, that is really annoying.
You can test it if you have an iPad:
http://www.professorparticular.org/
I've search a lot for a solution but nothing close to what I have.
It would appear the theme you are using is a responsive theme and changes the content dimensions based on screen size/resolution. It will remove and or move some elements on the page when you view the site on a device with a smaller screen.
One quick fix for this is to go to the header.php file in the theme's files and remove the 5th line from the top. The line to remove is <meta name="viewport" content="width=device-width" />. This should fix your menu problem. Without actually going into the CSS and HTML of the theme and recoding it, this is probably your easiest option.
I noticed that if you go on google chat, and "add to home screen", once you open it from home screen, the browser disappears and all you see is the website itself... I'm wondering how google managed to do that? this is for a website I am making that is supposedly compatible for the iPad.
Add the following meta tag to the page's header:
<meta name="apple-mobile-web-app-capable" content="yes">
The window.navigator.standalone boolean JavaScript property will indicate whether the page is currently displayed in full-screen mode (it will only be displayed full-screen if launched from a home screen icon, not if visited from within Safari).
To keep all links from 'breaking out' of the full-screen mode, see this
Apple says in the Safari HTML reference that the below code is supposed to make the the web-app full screen on iPhone OS 2.1 and later.
<meta name="apple-mobile-web-app-capable" content="yes">
But it doesn't seem to work. Is there a way of hiding the title/location bar within Safari in an iPad WebApp?
This only works after you save a bookmark to the app to the home screen. Not if you just browse to the site normally.
If you want to stay in a browser without launching a new window use this HTML code:
<a href="javascript:this.location = 'index.php?page=1'">
First, launch your Safari browser from the Home screen and go to the webpage that you want to view full screen.
After locating the webpage, tap on the arrow icon at the top of your screen.
In the drop-down menu, tap on the Add to Home Screen option.
The Add to Home window should be displayed. You can customize the description that will appear as a title on the home screen of your iPad. When you are done, tap on the Add button.
A new icon should now appear on your home screen. Tapping on the icon will open the webpage in the fullscreen mode.
Note: The icon on your iPad home screen only opens the bookmarked page in the fullscreen mode. The next page you visit will be contain the Safari address and title bars.
This way of playing your webpage or HTML5 presentation in the fullscreen mode works if the source code of the webpage contains the following tag:
<meta name="apple-mobile-web-app-capable" content="yes">
You can add this tag to your webpage using a third-party tool, for example iWeb SEO Tool or any other you like. Please note that you need to add the tag first, refresh the page and then add a bookmark to your home screen.
It only opens the first (bookmarked) page full screen.
Any next page will be opened WITH the address bar visible again.
Whatever meta tag you put into your page header...
This site has a working workaround, same effect, uses some javascript to set the first child div to total height of viewport.
http://webapp-net.com/Demo/Index.html
Looks like most of the answers on this thread have not kept up. iOS Safari on iPads have fullscreen support now and it's very easy to implement using javascript.
Here's my full article on how to implement fullscreen capability on your web app.