I have created numerous resolutions of apple-touch-iconfor my website. This means when someone adds my website to their Apple device Home Screen it has that icon. However when you click the icon it opens in a standalone window, rather than in the Safari browser.
I have tried using <meta name="apple-mobile-web-app-capable" content="no">but this doesn't seem to do anything.
Is there a way of preventing this from happening and make the webpage open in Safari only?
I think I found a way. Remove these lines from <head> section:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
And remove minimal-ui from:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
(if defined)
Here is the source: https://discussions.apple.com/thread/5967053?tstart=0
If your app doesn't have that <meta> tags it should open directly inside Safari (at least mine does).
Related
When change orientation of iOS device the contents of Webview don't always adjust to new orientation. It cuts off to what seems to be width of the space that it occupied in previous orientation. Screenshot below
On orientation change I call orientationchange event
evalJavascript("var e= document.createEvent('Events');" +
"e.initEvent('orientationchange',true, false); document.dispatchEvent(e)");
In HTML I have viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=1" />
What's interesting is that this does not happen to other pages like New York Times home page, which I load locally. Any ideas what could be the issue?
Put this HTML code into your website header:
<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device- width, height=device-height">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
This should ensure that your website is app/mobile accessible.
I've added meta tags to my web app to make it fullscreen if added to the iPhone home, it works but only on the first page visited (If I add page 2 to my home, page 2 won't have the address bar, but any new page will). When I navigate to a new page, it shows a bar with the address, option to close (return to previous page) and read options. I'm using turbolinks, if I disable it, when I click on any link (a simple <a href="page.html">) it opens up Safari instead of staying in the web app.
Is there any way to keep navigation within the home app?
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Yes, you should add a manifest (see: https://web.dev/add-manifest/) and make sure it holds the 'scope' directive. Set it to - at least - your domainname or a / if you want to make it relative.
I have a responsive webpage that changes as the screen resolution changes, but for some reason, it loads the non-responsive version whenever I load the page on my iPhone:
http://rayku.com/register
The home page is fully responsive on the iPhone (http://rayku.com/home), but I'm not sure why the registration page isn't. Do you have any ideas?
I don't have an iPhone, so I can't test this, but it looks like you're missing a meta tag from your <head> tag. Try adding this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Hope this works.
You're missing the viewport meta tag (which is correctly present on the home page).
<meta name="viewport" content="width=device-width, initial-scale=1">
I'm working with the iOS simulator, it rotates fine, but unlike android the webview doesn't seem to re-size automatically. The orientationchanged event fires but I'm not sure how to handle refreshing the page. I can't do a whole page refresh, although it does solve the problem, since I'm using the multi-page JQmobile template. Any thoughts on other ways to re-size? I've tried $.mobile.trigger('pagecreate'); and pageshow.
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0 target-densityDpi=device-dpi" />
have you kept this
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
in <head> of the index.html in IOS it will automatically resize when device rotated.
I've upgraded from jQuery Mobile a3 to b1, (Mainly because a3 didn't work with WP7 devices) and now it's not scaling correctly on any of my devices (iPhone 4, Droid X, HTC Surround - WP7). Any idea's as to what's causing this? I'm not using any custom css or anything else special... (I was previously, but I've since removed it all in attempt to find out what was causing the issue)
It does re-size with chrome when I re-size the window. I've tried clearing the cache/cookies/history/everything on the phones.
http://us.parkmobile.com/mobile/
Your not setting the viewpoint meta tag
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
http://jquerymobile.com/demos/1.0b1/ (right click to view source)
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
This is what I use :-)