I have the iOS 15 beta installed and looking at my website on the new Safari update, I see that the top header is showing a grey header instead of being transparent to flow under the notch etc.
The whole site is plain white and black text, so I'd like the status bar to be transparent and black text so the site blends in perfectly.
I have tried:
<meta name="apple-mobile-web-app-status-bar-style" content="default" /> as well as
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
Also used:
<meta name="theme-color" content="#ffffff">
None of that seem to make a difference, I checked other websites where the header color is pretty much merging with the header, if you check:
cnn.com or hillarys.co.uk you will see that the header affects the color of the Safari's nav bar on iPad, on iPhone it will just take over the notch area so it becomes the header. For me, no matter what I do, I cannot get that white header/notch to blend in with my white site.
Hopefully it makes sense and thanks in advance.
If your phone is in Light Appearance mode (Settings -> Display & Brightness), it seems that there is a max darkness that you can set with <meta name="theme-color" content="foo">. For example:
<meta name="theme-color" content="blue"> affects the header in both light and dark mode.
<meta name="theme-color" content="black"> affects the header in both light and dark mode.
<meta name="theme-color" content="#ffffff"> affects the header only in light mode.
Related
I'm wondering if anyone has had a similar experience when trying to develop a PWA for iOS.
Essentially I have a navigation bar at the bottom of my app and there is a large distance between the bottom of the navigation and the bottom of the screen where the safari url bar would typically be, i'm wondering how I should go about removing this empty space, I find that after I add the PWA to my home screen, if I close both safari and the PWA app instance then restart the PWA the app reloads without the bar but this isnt the ideal user experience for us.
As far as I know I am using the correct meta tags which should have hopefully resolved the issue:
<Head>
<meta name='theme-color' content='#fff' />
<meta name='apple-mobile-web-app-capable' content='yes'></meta>
<meta name='viewport' content='width = device-width'></meta>
<meta name='viewport' content='height = device-height'></meta>
<meta
name='viewport'
content='initial-scale = 1.05, user-scalable = yes'
></meta>
<meta
name='apple-mobile-web-app-status-bar-style'
content='black-translucent'
></meta>
<meta name='emotion-insertion-point' content='' />
</Head>
bottom gap between nav and screen
I'm trying to make different dimension of one modal.
If I resize in the Browser the change is what I want.
But, if I change the Chrome to simulate a mobile environment or if I open the code at my phone it doesn't work.
I the example I tried to make a mobile first approach. My dialog-content is white as default. Then I change to blue if the width is bigger than 750px and to black if is bigger than 1000px. I make other change too but the color is the important one in the examples.
I would like to know why my "default" case is not working for mobile.
The code can be found here.
Try adding viewport meta tag in the head of the document:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- ... -->
</body>
</html>
Asp Menu control is not rendered as the way it has in IE 8 and IE 9.please help to fix this issue.It is padded with white space or the sub menus are not displayed properly sometimes.
compability mode error,
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</head>
Hi I just started develop applications for mobile devices, Have the next trouble. This site: http://dimax.co.il/development/test-ding/OscarWilde/#/menu dispalyed correctly on PC browsers, but on Safari on iPhone 4S, it should be displayed full screen but it much less then full screen. All css you can see there. Thanks for help.
Ensure you have view port set in your head section
<meta name="viewport" content="initial-scale=1.0">
A more complete answer for mobile sites would be:
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1, user-scalable=no" />
I am writing a web application for use on mobile touch devices, to begin with I am concentrating on the ipad. The application will contain a grid of thumbnail photographs, similar to google images.
I am really struggling with the layout of this site, I want the thumbnails to be equally spaced, with margins of the same size at the edges.
I have tried several methods, but have run into problems with all of them.
1.I tried designing the site with a fixed width of 960px, and laid out the thumbnails and their margins symmetrically for this width. This worked to a degree, but the ipad defaults the browser width to 980px, so the white space at the edges were larger than I would have liked.
2.The same as above, but I also specified:
<meta name="viewport" content="width=960, user-scalable=no" />
Everything now looks as it should on the ipad (in portrait), it's not too bad in landscape (I think the thumbnails are blown up, and a little pixelated). It displays fine on the desktop, but is unusable on the iphone as everything is too small.
3.To get round the above problem, and as suggested by apple themselves I tried swapping the above with:
<meta name="viewport" content="width=device-width" />
With this, I get a sensible scale for both iPhone and iPad, but the problem is I can't get pixel perfection on my layouts, the white space at the left and right edges of the screen are not equal (because I am dealing with a grid of fixed width images, that do not fit a whole number of times into the space available)
Can anyone suggest the best approach please, I did consider using javascript to adjust the layout, but would prefer not to take this route.
Thanks
A good attempt. I use this, see my link for an example, however this is only for iPhone mainly as the iPad is different. I would suggest seeing the FIXED layouts on:
http://www.gorgeouscouture.com/mobile/
http://m.oasis-stores.com/
http://m.asos.com/mt/www.asos.com
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mobile.css" type="text/css" media="all, handheld" />
Notice I do not use the HTML5 heading. This is simply for other use of mobile devices. MyCSS:
body{width:320px;margin: 0px auto;min-height:356px;font-family:Georgia, Georgia, Arial, serif;background-repeat:repeat;background-position:50% 50%;text-align:center;background-color:#f4f8f9}
#b{position:relative;margin-left:0px;margin-right:0px;width:auto;height:auto;background:#fff;-moz-box-shadow:0 0 3px 3px #eaeaea;-webkit-box-shadow:0 0 3px 3px #eaeaea;box-shadow:0 0 3px 3px #eaeaea}
#content{position:absolute;width:auto;height:auto;top:25%;background:#fff}
Notice the fixed width assignment though.