Our team use PWA for our website and I have an issue with status bar color on iPhone X.
Here is my index.html meta tags:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="transparent">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover">
Changing status bar content doesn't help:
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
I was looking for solution but I haven't found it yet. For comparing I've attached two screens from Xcode simulators with iPhone X and iPhone XS based on iOS 12.1:
https://i.stack.imgur.com/HB5ji.png
on iPhone XS it works like a charm
Since black-translucent fills the status bar area with the background-color of the app's body tag, like padding, I'd play around with the size, background-color and position of they body element.
Related
I would like Safari on Mobile to hide the URL Bar when the iPhone is in Landscape mode.
I used the following code which works perfectly on my iPhone 7, but on the newest iPhones is not (Tested on iPhone 11 and 11 Max). The URL bar is hidden when i flip the phone from Portrait to Landscape but then appears again when I touch the navigation bar (position: fixed;) which goes underneath the url bar.
<!-- Meta Tag -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui, window.scrollTo(0,1)">
<!-- Fullscreen Mode -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Status Bar -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
The front end and responsive design of following page is working properly in all mobile browsers except iPhone 7 and iPad 7.
http://tinglabs.in/chennai/tingau/index-ios-resp.html
I have tried scaling it properly through the following meta tags but it still doesn't work
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0">
Am I overlooking something?
you can try to use this
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0">
When in portrait mode viewport height is proper, but when I rotate the device to landscape the height is improper as if it takes portrait height (not sure though). I am using jquery mobile for web app. My viewport tag is :
<meta name="viewport" content="initial-scale="1", maximum-scale="1", user-scalable="no" />
I don't give height and width still it works for portrait mode but not for landscape when rotated from portrait to landscape. Landscape only works when document is loaded in landscape mode but not when rotated.
Any suggestions pls help.
Markup:
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<frameset id="mainContainer" >
<frame name="frame1" id="frame1" src="framesource1.php"/>
<frame name="frame2" id="frame2" src="framesource2.php"/>
</frameset>
</html>
is it possible to use a different meta tag for landscape device vs. portrait device
e.g. I want to use this meta tag for ipad portrait mode only
<meta name="viewport" content="width=device-width, initial-scale=0.70, maximum-scale=1">
and for landscape mode on the ipad i want to change the initial-scale to this
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Does stating
<meta name="viewport" content="width=device-width" />
have the same effect as stating
<meta name="viewport" content="width=768" />
for the ipad?
It depends indeed on the orientation of the device: setting a specific pixel value will cause your layout to be scaled up with a factor of 1.333 to fit inside the 1024px device width when in landscape mode.
Setting width=device-width on the other hand will not scale anything up, but change the viewport width, for which you then can craft an optimized layout using media queries. Or that is at least the theory: the iPad somehow interprets width=device-width as 768px even in landscape mode. In order to get the real device width, you have to add initial-scale=1.
Hence, I disagree with James' suggestion. Just go for:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
and deal with size differences using liquid / responsive layout techniques.