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
Related
Like the title says, when I open my html file, it looks weirdly zoomed in. I checked the browser setting and its at 100% zoom. But what is even weirder, when I zoom out to 90% and then zoom in again to 100%, the webpage looks like how I intended it to look like.
I am very new to web development. Any clue as to what might be causing this issue?s
Edited to make question clearer:
This is what I have in my head tag.
I only use css, no scss or anything like that. I write code in visual studio.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<!-- Personal CSS -->
<link rel="stylesheet" href="homepage_style.css">
<!-- Google Font "Karla" -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Karla">
<!-- Font Awesome Library -->
<script src="https://kit.fontawesome.com/f4b0af8bdd.js" crossorigin="anonymous"></script>
<title>My Portfolio</title>
I have tested your code, and it works well for me. So by the look of it, it should be the <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes"> line.
This line makes your page adapt to the user's screen resolution and scale. As we may have different screen resolutions, or simply the body I used to test ( a simple Lorem Ipsum ) could be so much different than yours, it didn't gave me that issue.
As I don't know the contents of your website, i will recommend you to remove the shrink-to-fit=yes as it should be what it is causing this.
That may affect other contents, so maybe you could use some Bootstrap ( you may already be using it ) to readjust some parts of the page if they get misconfigured.
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 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.
I always get the wrong measurements of my webapp. It is 320x460 even though I'd expect it to be 320x548.
I'm using following metatags:
<meta name="viewport" content="initial-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
So I'm not sure what I'm doing wrong.
This may help you -
standard viewport tag to set the viewport to the device's width
Android 2.3 devices need this so 100% width works properly and
doesn't allow children to blow up the viewport width
<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
width=device-width causes the iPhone 5 to letterbox the app, so
we want to exclude it for iPhone 5 to allow full screen apps
<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" />