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
Related
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.
I have been getting reports from a couple of users "Android users in most cases" that the website is opening as a white screen on their phones.
After some troubleshooting, I found out that if you zoom out and scroll around, you will find the actual website.
When you open the website, the viewport is showing a large white screen and the actual website is inside it.
I added this to the header.php <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1"> and its not getting fixed.
Any idea why and how to lock the website content to the viewport cadre?
Screenshot sent by users: when they first open the website
Screenshot sent by users: After they scroll right and zoom out a bit
Edit:
First try changing your viewport tag to this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You could try adding the following CSS:
body {
width: 100vw;
overflow-x: hidden;
}
You could also try disabling zoom by adapting your viewport tag with the following:
maximum-scale=1.0, user-scalable=no
You might also want to look at the CSS touch-action property:
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
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 trying to get a site with a fixed side nav working on the iPad. I realized that iPad doesn't support position:fixed very well, so the side nav just scrolls up with the rest of the page. Is there a decent workaround for this? There is no time to redesign the site for iPad before the launch.
Thanks!
You can use a fixed position, but you have to make sure that the meta-tags are set correctly.
Example:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
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.