We've been working on a web app and did some work to make it more PWAesque, so we added <meta name="apple-mobile-web-app-capable" content="yes"> to our <head />.
This ended up being more problematic as we hadn't thought to implement our own navigation UI (back and forward etc) and it appears that as soon as you exit you lose your logged in session.
So this ended up negatively impacting experience and we've decided to remove <meta name="apple-mobile-web-app-capable" content="yes">.
Easy, right?
Nope.
Even with the removal of this meta tag and new installations to the Home Screen (and on different devices where it was not previously installed) it continues to open in standalone mode rather than in Safari.
I've scoured Google pretty hard but maybe I'm not searching the right terms.
Is there a step that I've missed? Has any one encountered this?
Thanks in advance!
The answer is that it was in our manifest.json file.
Related
I am testing out Bootstrap responsiveness navbar and I have a demo website. When I resize the browser on a desktop, it all works fine including the nav bar which become collapsible menu with a small icon on the top which I can click to see more menu buttons.
But when I tried it from a mobile browser (I tried it on chrome and internet browser on an Android), I didn't see the responsive design. I could only see very small version of desktop like website.
Could anyone point out what I am doing wrong?
Add this to your HTML head..
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This tells smaller device browsers how to scale the page. You can read more about this here: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
as suggested here http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
<meta name="viewport" content="initial-scale=1">
would be an even better choice as it makes going from portrait to landscape and back a much more pleasant user experience as with/height would adopt naturally because of the possible auto-scaling.
Adding this for people searching this error for whom the accepted answer is not working. I believe this will be a rarer, but nonetheless frustrating case:
If your page is rendering inside a frameset (for example domain cloaking), then putting the meta tags won't help. You would need to put them in the page on the cloaking domain, which you may or may not have access to depending on your DNS host.
Try clearing your browser's cache and open the page in a fresh tab. This sometimes resolves the issue for me whenever it happens.
I am trying to find a solution of the IE white flash in a meteor app.
The website is this one (note that it's in closed beta).
IE9 gives a very bad user experience, and while I don't think it will ever be as good as with more modern browser, I really think some issues should be resolved.
And I think that the white flash on page change it's the worst one.
Basically for every action that changes the url, the page redraws itself and flashes white for a few milliseconds.
I've read other topics and tried to apply some of the suggest fixed, but nothing worked.
I've tried to insert
<META HTTP-EQUIV="Page-Exit" CONTENT="BlendTrans(Duration=0.0)">
<META HTTP-EQUIV="Page-Enter" CONTENT="BlendTrans(Duration=0.0)">
But I think it does nothing on IE9 or in this case.
I also tried to set the background of html and body to dark gray, it did nothing.
I'm actually not sure what else should I try and if this is a common issue when building website with realtime, modern frameworks.
Thanks in advance.
P.S. I also found this issue in iron-router, and it seems that IE<10 trigger a full page refresh every time, and probably that's the main cause of what I'm seeing, because Meteor needs a bit of time to load itself, thus leaving the page blank while it's doing it's magic.
this meta tags
<META HTTP-EQUIV="Page-Exit" CONTENT="BlendTrans(Duration=0.0)">
<META HTTP-EQUIV="Page-Enter" CONTENT="BlendTrans(Duration=0.0)">
not supported in IE9.
As solution for you example you can use compatibility with IE8
you can add
<meta http-equiv="X-UA-Compatible" content="IE=8" />
I'm trying to create an offline-web app and my cache.manifest file is
CACHE MANIFEST
http://www.page.com/index.html
http://www.page.com/d3.js
http://www.page.com/list.csv
NETWORK:
*
And the beginning of my html is html manifest="cache.manifest"
To format the app and make it run full-screen, I included this tag in the header:
<meta name="apple-mobile-web-app-capable" content="yes" />
But doing that and running it from the homescreen will result in the app failing, and requesting an internet connection.
If you take that one line out and run it from the homescreen, it will open in safari with the url bar and everything, but the app will run correctly.
I've seen this problem discussed in a couple places such as here and here, but never with any working solutions or explanations.
Does anyone know why this is or how to avoid it? Thanks in advance.
<meta name="viewport" content="width=device-width, minimal-ui">
For iOS 7.1, this works as a superior alternative.
I have a webapp done with jqtouch and the offline cache is not working when I add it to the homescreen as a fullscreen app, I finally found out what was causing the app not to cache, it was when I added it to the homescreen in fullscreen with
<meta name="apple-mobile-web-app-capable" content="yes" />
that it didn´t work.
If I remove the tag then the cache is working!
Any suggestion really appreciated since I need my app to be in fullscreen.
Thanks.
This is less of an answer, but I've been fighting with the same problem for a while, without a solution: https://stackoverflow.com/questions/21564399/offline-webapp-on-ios7-stops-working-after-export-to-home-screen
Your workaround seems at least promising, are you using IOS7?
I've read a bunch of blog posts, like this one, and also some other questions here on SO, like this one.
These all say that if you want to popup a message advising the visitor that the Desktop mode of IE 10 is required to view the site, then 'all you have to do' is add this meta tag:
<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true" />
Or you can set an HTTP header instead:
<add name="X-UA-Compatible" value="requiresActiveX=true" />
I've tried both of these techniques and neither of them seem to work! The Modern UI version of IE just does nothing at all. No popup, no message, nothing.
I'm running my site locally at the moment through IIS 8. I've added the URL to my trusted sites list. If I use another browser, like Chrome, I can see that the response header is definitely being set. The page runs in IE10 Modern, it just doesn't tell me to switch to Desktop mode...
I've tried strategically positioning the <meta tag in different places in the <head etc but this has not helped either
Can anyone offer any advice? Even mentioning a site that implements it would help...
Edit
I've tried adding this to a 'live' web page on my own site and still I am not prompted to switch to desktop when using IE10 Modern...
Not sure this will address it for you but it did for me. I had to combine multiple Compat tags into a single entry. Lke this:
<meta http-equiv="X-UA-Compatible" content="IE=7, requiresActiveX=true"/>