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.
Related
I've added meta tags to my web app to make it fullscreen if added to the iPhone home, it works but only on the first page visited (If I add page 2 to my home, page 2 won't have the address bar, but any new page will). When I navigate to a new page, it shows a bar with the address, option to close (return to previous page) and read options. I'm using turbolinks, if I disable it, when I click on any link (a simple <a href="page.html">) it opens up Safari instead of staying in the web app.
Is there any way to keep navigation within the home app?
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Yes, you should add a manifest (see: https://web.dev/add-manifest/) and make sure it holds the 'scope' directive. Set it to - at least - your domainname or a / if you want to make it relative.
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.
I am developing a mobile web site using Sencha Touch. In iOS7 Safari I cannot make the top address bar & the toolbar below go away. Sencha used to handle this upto iOS6 but some recent changes in iOS7 is causing this issue.
http://java.dzone.com/articles/safari-ios-7-and-html5
I read the above link & it seems this is also an issue for HTML5 Games & a few other apps.
The old window.scrollTo() which worked for iOS6 no longer works.
Add minimal-ui in your meta tag viewport, this will hide he address bar and browser controls in safari iOS7:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
More info on iOS7 and fullscreen mode for mobile websites: http://blog.initlabs.com/post/81716286465/how-to-display-websites-in-fullscreen-mode-in-ios7
With iOS 7 I don't think you really have a choice. Obviously Apple doesn't want developers doing this anymore, and even if someone finds another workaround it probably won't stick around for that long.
Honestly, I think getting fullscreen functionality is a fair trade off for users to install the app to their home screen. Obviously there are certain cases where this isn't true, but I guess I find it understandable to some degree. You should still be able to add the following meta tag and it will be fullscreen once added to home screen:
<meta name="apple-mobile-web-app-capable" content="yes">
There are a few nice libraries out there that add an "add to homescreen" prompt that you can set up to be rather unobtrusive with custom messages. In this case, might be best to embrace the change...
I have use phonegap+jquerymobile to develop my mobile application.
I noticed condition below:
(step.1)I tap an textarea to input something
(step.2)I tap a select button with ios form control(prev/next), then the style change greatly. All the elements has been zoomed in.
I test my application in andriod. However, everything works as expect.The condition only shows in IOS.
Any idea? thanks a lot.
To prevent zoom when input element is selected use this viewport meta tag:
Android:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
iOS:
<meta name="viewport" content="width=device-width,user-scalable=0" />
I just got an html5 app with code that needs to be deployed to an iphone but the sizing seems to be totally messed up (it's like 4 times of the entire screen). As I have very little experience with html5 I'd like to ask, is there something else that needs to be set for the page to correctly fit onto a screen besides adding the
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
line in the index.html file?