I have got a web page that I am showing on full-screen when open it from the home screen via:
<meta name="apple-mobile-web-app-capable" content="yes">
this works fine, but in iOS7 the status bar appears with a black text over black background and:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
does not work, while it works on iOS8.
Where does it get the text colour? and why there is no possible way to change it? I searched for a bit on this matter and I couldn't find a solution other than not showing the app on full-screen mode, I need to show the time on the status bar.
Related
Is it possible to change the color of the Status Bar in a Progressive Web App on iOS 11.3 Beta 6? Tried to change the HEX Code of background_color and theme_color in the manifest.json file but I couldn't achieve any changes.
Well you could use the
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
To make the status bar transparent (not invisible) and use a div behind the status bar of whatever color that you like. Framework 7 does this by allowing you to change the color of
<div class="statusbar" />
for a custom ios status bar.
Of a side note you may also need the meta view port tag properly added in the head as well. E.g.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
This tag is not needed for the status bar, but for using a splash or loading screen. A user on medium did an article for setting up the splash screen.
<meta name="apple-mobile-web-app-capable" content="yes">
Also, as apple has limited support for the manifest file & has changed their pwa support in the past, these tags may eventually become deprecated and they may end up using the manifest.json file properly.
I'm creating a web app that needs to be displayed in full screen mode on an ipad. I also need to remove the 300ms click delay for the app to perform responsively. To do this I've added the following metatags to the header:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0">
Full screen mode is activated when I add the website to my home screen (Safari, Share->Add To Home Screen).
The issue I'm running into is that when I view the web app in Safari, the 300ms click delay is removed, however, in full screen mode (when opening the app via the home screen icon), the 300ms click delay persists.
As a very simple example, here is a codepen with 2 radio buttons with the meta tags set as I mentioned above:
http://codepen.io/cgat/full/ZBwYyW/
If you open this pen in mobile Safari and add to the home screen, you'll see the delay in radio clicks.
I'm testing with an ipad air.
I'm working on a web app for iOS 10 (using Framework 7) and I would like to change the default black color of the status bar.
I tried this:
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
But it's not working... How can I do?
Thank you!
Try this in the CSS
.statusbar-overlay {
background: black;
}
To get a light status bar with black text, use:
<meta name="apple-mobile-web-app-status-bar-style" content="default">
To get a black status bar with white text, use:
<meta name="apple-mobile-web-app-status-bar-style" content="default">
To get transparent statusbar with white text, use:
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
See this link
If you would like a semi transparent statusbar, you can add a 20px high bar fixed to the top of the page. I would do a query though to check whether the app is in full screen mode: You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.
I haven't tested this though.
First I have to say that I am new to this web app home screen button theme.
These lines:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
worked cool for me so far, yet there is a problem when orientation is changed from landscape to portrait. Then the app cuts of just the part where the browser chrome was and leaves a white field instead on the right side.
Strangely when I start in portrait mode and then change to landscape all works well as supposed to back and forth.
How is this to be avoided?
Thanks so much for help
Garavani
The following code solved my problem:
$(window).on('orientationchange', function() {
// only necessary for home screen use
// otherwise blank space is left where the adress bar was (on orientation change from landscape to portrait)
document.body.scrollLeft = 0;
} );
I have a web app running on Safari on an iPad. I am starting the app from the iPad home page. I want the app to start in full-screen mode, and to continue running in full-screen mode (i.e. not showing the Safari address bar).
I want to prevent the "pinch-to-zoom" and pan/zoom functions so the page always remains static. How do I do this?
If you put the following meta tag into the html output and then start the app from the homepage then it will be fullscreen when it runs:
<meta name="apple-mobile-web-app-capable" content="yes">
The following is to prevent the user from zooming:
<meta name="viewport" content="width=device-width,user-scalable=no">