If link has number (like 20000 ) in chrome ipad opens pop-up menu and try to call on this number. I added <meta name="format-detection" content="telephone=no"> but it didn't work, menu still shows and I can't go to page
Add this meta tag to your header. If you want other links to be phone numbers, use the "tel:" prefix.
<meta name="format-detection" content="telephone=no">
Related
I have published my app on iOS Appstore. To show smart banner I use following code on my webpage.
<html>
<head>
<title>Kinjal's Games</title>
<meta name="apple-itunes-app" content="app-id=6444216110, app-clip-bundle-id=com.kinjal.brainbooster"/>
</head>
<body>
Yo
</body>
</html>
When I load webpage, it shows banner for 1 sec and then disappears immediately.
To verify, I tried by using other app's Appstore id. If I try using facebook's app id, it works.
<meta name="apple-itunes-app" content="app-id=284882215, app-clip-bundle-id=com.kinjal.brainbooster"/>
But it doesn't work only with my app id
<meta name="apple-itunes-app" content="app-id=6444216110, app-clip-bundle-id=com.kinjal.brainbooster"/>
We have a webapp that we add to the home screen from Safari. It's built with Ionic /Angular. Now whenever we switch to another page within the app, the white bar at the top appears where you can change the page zoom and access other settings (change between mobile and desktop website and access further website settings). It's covering part of the webapp and does away when you click on "Done" on the left side - until you access another page, then it re-appears. It's the same behaviour on iPad and iPhone, iOS 13.1 and 13.2 (beta).
Is there a way to prevent this from appearing?
The webapp has set the following meta tags, among others:
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-title" content="MyWebApp">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
If the new page that you’re opening is from a different website, such as an oAuth login, I don’t think you can fix this issue yet.
However, if the new page is on the same domain, you can simply adjust your app’s scope in your web app manifest. If you don’t already have a manifest, it looks like this:
{
"name": "My web app",
"short_name": "Web App",
"description": "This is a web app",
"lang": "en-GB",
"start_url": "/app/home.html",
"scope": "/app/",
"display": "standalone"
}
That scope item means that all files, and pages, in the app directory will work in your PWA like a normal native app (ie. no popup windows). All files outside this scope will open in the normal web browser, with a back button to your PWA. It’s not ideal but it does give a much better UX than before. You can read more about the scope setting here.
I would recommend using a manifest.json generator like this one, just because they make this process so much easier. You’ll find the scope setting under the ‘start url’ box in this example.
I have the same problem... I have only been able to find a solution to remove the word "Done" from the left side of toolbar.
change any redirects from location.href='yourUrl' to location.replace('yourUrl') and it should remove the word "Done"
I cannot take credit, and I cannot find the post where i learned this.
It actually stopped the redirection out of the web-app which is a good first step. I will continue to look for a way to remove that URL bar...
Hope this helps
Any iOS10 beta testers out there know if Messages uses a syntax similar to Facebook Open Graph to set things like meta descriptions and images?
I'm building a site and would like to have it ready for when iOS10 is launched.
Here's the type of stuff I'm talking about:
<!-- Facebook Meta -->
<meta property="og:title" content="Site | Title of Page" />
<meta property="og:image" content="http://www.domain.com/im-content/social-post-images/facebook image.png" />
<meta property="og:url" content="http://www.domain.com" />
<meta property="og:site-name" content="Site | Title of Page"/>
<meta property="og:type" content="website" />
<meta property="og:description" content="Here is a description of my site that will show up in the Facebook card." />
And here's the image/info I'm trying to control:
It's at least using Open Graph and Twitter Card.
Demos
Open Graph
Markup:
<meta property="og:image" content="https://www.j-26.com/assets/facebook.jpg"/>
Preview:
Twitter Card
Markup:
<meta name="twitter:image" content="https://www.j-26.com/assets/twitter.jpg"/>
Notable findings
I tested this page using Twitter Card and Open graph and iOS seemed to prefer Open Graph. On the test page, the Twitter Card markup is placed before the Open Graph markup and the image used for Twitter Card is smaller than the one used in Open Graph. Despite the smaller size and earlier placement, iOS chose to display the image from Open Graph.
Why is one metarefresh to YouTube failing while another is succeeding? And why does it have anything to do with whether Youtube as an app is installed?
We have two metarefresh links that take users to videos from an iOS app.
(1) This page refers properly to Youtube whether the Youtube iOS app is on your device or not:
The invoking link is: http://ourURL/videos/ourpage.html
The receiving HTML page is this:
<!doctype html>
<html>
<head>
<meta http-equiv="Refresh" content="0; url=http://youtu.be/tJ08IHetnbU" />
</head>
<body>
</body>
</html>
(2) The referral page that breaks is designed the same way but works only if the Youtube app is NOT on your iOS device. If the Youtube app is on your device, we see "Playback error. Tap to retry." "Error loading Tap to retry"
The invoking link is: http://ourURL.com/videos/ourpage2.html
<!doctype html>
<html>
<head>
<meta http-equiv="Refresh" content="0; url=http://youtu.be/0FZbh-Cqfg4" />
</head>
<body>
</body>
</html>
The answer turned out to be a caching issue in the YouTube app.
It appears the Youtube app relies on the Safari cache. The Meta-refresh had referred to different video links before - so the new updated links failed.
Interestingly, for whatever reason, Safari is not using its cache and showed the proper video.
After going to Settings, Safari and "Clear cookies and data" - the YouTube App started showing the referral pages properly again.
Is there anyway that I can create a link that when clicked on an ipad, it will open in a new full screen window (no address bar/tabs/etc)?
At the moment, the only way that I am aware of to open a page in safari without the safari chrome(address bar/tabs/etc) is to add the <meta> tag following to the <head> element in the source.
<meta name="apple-mobile-web-app-capable" content="yes">
Note that for this to work, the user must bookmark the page on their home screen. Apple provides a number of other meta tags as well that can add a 'native app' look and feel to the user's experience. All of which can be found in the documentation.