With the recent update to iOS11 we came to following issue with our Webapps after using Safari's "Add to homescreen".
When opening the Webapp, the behaviour of the status bar is as wanted (The statusbar is on top and the Webapp is displayed right under the status bar). After changing the orientation, the status bar acts not as it should.
We tried different meta tags but nothing seems to work.
Did anyone find a fix for it? Thanks for your help in advance.
Example link:
https://awf.marketing/app/store/zihler
(to recreate the issue - needs to opened with an iPhone running iOS11+)
Images:
1. Normal view of the Webapp after opening
2. After switching to "Landscape" then back to "Portrait" the Webapp content gets placed behind the status bar instead of under it
Related
Over the past few days, I've been struggling to figure out how to disable the Android device's bottom status (navigation) bar. (As shown in the image below)
Bottom Status Bar on Android
I've looked everywhere and tried everything to find the solution. I tried every method there was to do this, but it didn't work the way I wanted it to. The system overlays, like the bottom and top status bars, can be hidden, but they cannot be entirely disabled or concealed.
I want to know if it is possible to completely disable the status bars. I'm building an app for a marketing MV Player device and the public users can touch or interact with the application but I have to prevent them from exiting the application for security reasons.
I have tried the method given in this answer. The bottom status bar, however, will be hidden; nonetheless, it will become visible if you swipe up to the position of the status bar, or occasionally when you press the bottom of the screen.
You could use the package kiosk_mode to do what you are after. Have a look at this package.
I'm trying to make a fiori app using <SplitApp> view. My problem is when I use small device such as phone (portrait mode), the master view is not shown, but only the detail view (look like below):
I've tried to use property mode="PopoverMode" or StretchCompressMode but none of those worked.
Any suggestion?
Thanks and Best regards
I found the solution. I change the order of 2 views in target from:[master, detail] to [detail, master]
SplitApp is another root element of a UI5 mobile application besides App control.
It maintains two NavContainers if running on tablet/desktop and one - on phone. The display of master NavContainer depends on the portrait/landscape mode of the device and the mode of SplitApp.
Try to add items to the master page and then navigate and check if it goes to detail screen.
Is it possible to hide (completely remove, not change the styling) the iOS Safari status bar in a homescreen web app?
When you browse a webpage in Safari in a landscape mode the status bar disappears together with the rest of the browser chrome after starting to scroll.
The web app that I'm adding to the homescreen if fitted to the size of the display so is no scrollable.
After setting:
<meta content='initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<meta content='yes' name='apple-mobile-web-app-capable'>
<meta content='white-translucent' name='apple-mobile-web-app-status-bar-style'>
All the browser chrome is gone, but the status bar information is still overlaid over the top of the page regardles of the screen orientation. Is it possible to hide it?
There is no direct method for this (see: similar question) but... this link seems promising:
Everything Hybrid Web Apps Need to Know About the Status Bar in iOS7
The summary of the link is as below:
Key Comments (at link):
When viewing sites in Safari you do not have the ability to customize
the status bar in any way. Previous versions of iOS offered the
ability to view sites in full screen mode, but that was removed in
iOS7, see
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review.
Key Notes (in link):
StatusBar Cordova Plugin
With iOS7 Apple introduced some native Objective C APIs to control the
status bar. Because of Cordova, we have the ability to bridge these
native APIs directly into JavaScript APIs.
Luckily for us #shazron has already done this with the StatusBar plugin.
After adding the plugin to your application, you are given a StatusBar
object with a number of methods to manipulate the status bar in
JavaScript directly.
...
You can hide the status bar using StatusBar.hide(), or even change its
background color with StatusBar.backgroundColorByName() or
StatusBar.backgroundColorByHexString().
For example, the following sets the status bar to green.
<script>
document.addEventListener('deviceready', function() {
StatusBar.overlaysWebView(false);
StatusBar.backgroundColorByName('green');
}, false);
</script>
...
Outstanding Issues
While the web has come up with workarounds for most of the iOS7 status
bar issues, there are still a few that remain unresolved.
The status bar still overlays content displayed in a cordova InAppBrowser.
There is no known workaround, but a fix is slated for cordova 3.2.
The StatusBar plugin does not work in apps that lock the device into landscape mode.
Key Critic Comment (at link):
These solutions seem to be working only for Phonegap applications, for
us who don't use this and simply wrap our apps in a webview it seems
the only easy solution is to set the webview's top property to 20
instead of zero and that takes care of the issue at hand.
I have integrated Aviary SDK for IPhone app properly and works fine. Only design issue I am facing is as described below -
When the PhotoEditor is opened for the first time it adds some toolbar strip / view to other views when I navigate to them. If I navigate to other views before the editor is opened for first time them all the views displayed correct.
Before opening Aviary PhotoEditor - NO white bar at bottom
After opening Aviary PhotoEditor - There is white bar at bottom
Did anybody got this issue or have any idea about this??
If you are using the iOS 6 SDK, then you must include the following line in your editor's customization code:
[AFPhotoEditorCustomization setUsingIOS6SDK:YES];
What does
<meta name="apple-mobile-web-app-status-bar-style" content="black">
do -- can someone explain with an example?
I found this line in the official Safari Developer Library
This meta tag has no effect unless you
first specify full-screen mode as
described in “url.”
But which url?
What is the benefit of this meta tag?
First, the apple-mobile-web-app-capable hint has to be set for that to even work. This hint causes a web application to run in full-screen mode: it removes the address bar and navigation buttons you get by default in Mobile Safari. The removed areas are highlighted in red here:
So, once an app is in full-screen mode (i.e. the user has added the website to their home page), you can also control the colour of the remaining thin status bar at the top of the page with apple-mobile-web-app-status-bar-style, highlighted in red here:
Per the docs:
If content is set to default, the status bar appears normal. If set to black, the status bar has a black background. If set to black-translucent, the status bar is black and translucent. If set to default or black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar.
A couple of caveats:
This only works on the first page you load; any navigation away to another page will make the address bar and navigation buttons reappear. So if you want this to work, you have to build a single page website (for multiple 'pages' consider an Ajax page loading approach such as that used in the jQuery Mobile framework).
This only works when you arrive at the web page via an application shortcut icon; if you navigate to the website directly from within Mobile Safari it has no effect.
It changes the top bar w/ the banner and carrier on it and makes it a translucent black.