I just updated my iOS on iPhone 7 to 11.3.1. When I add my webapp to front page (standalone mode), the status bar (on the top with connection info) now appears as a solid white bar (white on white).
I've tried:
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
Removing meta tag completely.
All to no avail. I don't really care what color it is, but the white bar looks dumb. Can anybody help?
Figured it out. You need to add viewport-fit=cover to your viewport meta tag content.
Apparently, as of recently, the status bar will not overlap the content by default. This setting will override that. So your viewport meta tag might look something like this:
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1, user-scalable=no">
Check out this link on Reddit. Using...
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="theme-color" content="#000000">
...was the ONLY way I got a black status bar with white text. iOS 15.1, iPhone 11 Pro.
Related
when opening a website in iPhone Mobile Safari The full screen does not appear.
I tried this, but the problem still exists.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
What do you mean by full screen? Do you mean like you want it to be mobile friendly? or...
Have you actually tried:
<meta name="viewport" content="width=device-width, initial-scale=1.0">? instead of all those over things that you added in.
Is there any way which I could change the font color of title in HTML itself ?
I tried this
<style>
title {color:red}
</style>
but it didn't work.
I have never seen any styling available for the title text, However you can certainly change the color of your title bar in some browsers and mobile devices. use the following meta tags to achieve this.
for Chrome, Firefox and Opera:
for Windows phone devices:
<meta name="msapplication-navbutton-color content="COLOR_HEX_CODE">
for iPhone devices and safari you can only use the following:
black
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
default
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
translucent black
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
The <title></title> defines the Name of your HTML-document. As it only shows in the title bar of your Browser and in search engines there is no way you can style it.
According to the apple developer guidelines for web apps (found here), there are 3 choices for the status bar in a web app; default, black and black-translucent.
Default results in a white status bar with black text
Black results in a black status bar with white text
Black-translucent results in a transparent background with white text
I'm trying to implement the default behavior, sadly I just end up with a black bar with white text. I have initially opened the app in Safari, then clicked Add to home screen, then this is what I see when opening the resulting "app" on the home screen:
For reference here is what my HTML looks like:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="mobile-wep-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">
My manifest.json includes this:
"display" : "fullscreen"
Is this something to do with the iPhone 11? I'm expecting the status bar to have a white background and black text.
After several hours of pulling my hair off on this, I've discovered that dark mode in iOS 13 was to blame.
Going to Settings > Display & Brightness and switching back to Light mode fixes it.
I am working on a web-app and in testing on iPhone X using the Simulator, the status bar is completely black. How do I make my website cover the entire screen? I am not using any library; I have seen many questions mentioning something called Cordova but what I have is just HTML with CSS.
Here is my HTML code in the head.
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="viewport-fit=cover, width=device-width, initial-scale=1.0" name="viewport">
<title>My PWA</title>
<link rel="stylesheet" href="/assets/styles/design.css">
</head>
It is possible, but requires a few lines more. Here is how to do it. Strictly speaking I don't think you need width=device-width and initial-scale=1.0, I added it since you use it. The launch.png is your launch image that will show if your page takes time to load, and it should be a 1125 x 2436 PNG image and also be placed on your server, of course. It is required to make it work. As is the black-translucent status bar style and the viewport-fit=cover.
Also note that if you already have created a shortcut to your page you must remove it and create it again after you have updated your page with this content.
<html><head>
<meta charset="utf-8">
<link rel="apple-touch-startup-image" href="./launch.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name='viewport' content='viewport-fit=cover, width=device-width, initial-scale=1.0'>
<title>Test</title>
</head>
<body>
content
</body>
</html>
The above will stretch your viewport all the way to the top for iPhone X (and other models), setting the top bar content (clock, battery status, signal strength etc) to white on transparent. If you have a white or very light colored background this probably doesn't look very good. Unfortunately there is no way to have have dark content on your own background. However, there are a couple of options that might be good enough.
Setting the apple-mobile-web-app-status-bar-style to default gives you a black top bar content on a solid white background plate. This will look fine if you can accept your content to have a white top bar background and scroll under it.
<meta name="apple-mobile-web-app-status-bar-style" content="default">
Another option is to set apple-mobile-web-app-status-bar-style to black. This is more of a convenience, which creates a solid black background with white top bar content, effectively resulting in a reverse of using default.
<meta name="apple-mobile-web-app-status-bar-style" content="black">
Here are samples of how the different content parameters will look. Not iPhone X but the color schemes are same.
Read here if you need to account for the different top bar heights on different iOS devices.
I face same issue and solved by adding below code to Public --> index.html
<meta name="theme-color" content="#FFF" />
Since iOS 14 and introduction of dark mode on iPhones, Apple has made some changes. If you are looking for white or black bar around the notch (depending on light/dark mode) you can add the following metas:
<meta name="apple-mobile-web-app-status-bar-style" media="(prefers-color-scheme: light)" content="light-content" />
<meta name="apple-mobile-web-app-status-bar-style" media="(prefers-color-scheme: dark)" content="dark-content" />
Color of the bar will adapt automatically on dark mode activation or deactivation.
More options and explanations available here: https://firt.dev/ios-14.5/#status-bar-change
You can't. iOS doesn't support fullscreen.
https://caniuse.com/#feat=fullscreen
I have that meta tag in my website www.ssd-vergleichen.de
<meta name="viewport" content="width=device-width; initial-scale=1.0;"/>
To prevent the device from initial zooming into the website.
When watching the website on my chrome mobile browser on Samsung Galaxy S2, the website is beeing zoomed in about 400%.
What did I do wrong? Can anyone help?
Thanks in advance
Edit: With using
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
it works in Android's standard webbrowser, but still not in Chrome. I wonder if it works in IOS?
Edit2: No, it also doesn't work with iOS http://iphonetester.com/
Try this :
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi" />
Have you tried
<meta name="viewport" width="device-width">
As I understand it width="device-width" constrains the width of the layout to the device width. Surely setting intial-scale=1 is then telling the browser to zoom 100% (i.e. not scaled)?
Update
<meta name="viewport" content="width=device-width, initial-scale=1;"/>
Is intended to be used to scale responsive sites correctly. Considering your site is fixed to a width of 1100px, setting initial-scale=1 will not result in the whole page being visible.
From the W3C Use Meta Viewport Element To Identify Desired Screen Size
Try:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
with no ;
I had the same problem today and I was able to fix it by toying with the target-densitydpi attribute and setting it to high while setting the width to device-width
Like so:
<meta name="viewport" content="initial-scale=0.8, zoom=10%, width=device-width, target-densitydpi=high-dpi">
This solved my problem.
Try this:
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
In CSS put this:
html, body {
max-width: 100%;
overflow-x: hidden;
}
You should write
<meta id="viewport" name="viewport" content="[your_content_params]" />
I tried this and it worked.