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.
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.
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 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.
I have an iOS web app. I have the following css applied
body{
background-color:red;
}
This red background shows up in iOS safari but when I save it to the home screen the background is white.
Why is this happening and how can I fix it?
I'm sorry but I wasn't sure whether you were talking about the home screen icon or the website background color.
1. If you mean that the icon is getting white you can fix this by a meta tag:
<link rel="apple-touch-icon" href="the/url/of/your/icon-image" />
2. If you mean that the background color is white instead of red, I would suggest that you just put it as inlin styling, like this:
<body style="background-color:red">
Or you can use the background property, so your css will be like this:
body {
background:red;
}
I hope this answered your question and that it will work!
I have a Phonegap App which uses jQueryMobile 1.3.2 and Phonegap 3.1 (with the status bar plugin).
Everything works fine but the iPad Retina simulator (iOS 7) shows my screen cut off at the right hand side of the screen (iPhone Retina is fine, as are all Android layouts).
I'm using:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" >
...and tried with both EnableViewportScale true/false - whereas it has no effect besides the Retina 64bit - where a true will completely distort the view (I only see a green/white block), and also:
html, body { width: 100%; margin: 0; padding: 0; }
in my html pages. I have read through a few issues that iOS will return a different resolution value when "being retina", but never found anything in regards to fixing this related to phonegap.
The strange thing is, when I put set e.g. width=400 in the viewport meta tag, nothing changes... again, independent from the EnableViewportScale setting.
Thanks in advance for any clues...
Try This -
<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, width=device-width" />
The main issue was the StatusBar plugin I used, which caused the weird layout. After removing it, the layout was fine again.
As to the status bar - I don't really need to control it during the app so I did the following:
Open the plist file (Resources/{ProjectName}-Info.plist) and add the key "View controller-based status bar appearance", set it to "NO". Also create the key / make sure that "Status bar is initially hidden" is set to "YES".