I'm using
because i have other numbers on the page that are not phone numbers and don't want them detected.
I wrap the number in a link but I don't want it to be clickable in browsers, only on devices.
This is actually quite simple, Apple's documentation describes it quite thoroughly -
// Disable automatic telephone number detection
<meta name = "format-detection" content = "telephone=no">
// Explicitly mark a number as a telephone number
<p>A phone number: 1-408-555-5555</p>
To prevent the link doing anything when it's clicked on a desktop browser, you can do some browser sniffing...
$('a.someClass').click(function(e) {
if (!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
e.preventDefault();
}
});
However, why would you want to cripple this functionality in desktop browsers in an age where the use of software such as Skype for VOIP is commonplace? For an excellent discussion of why browser sniffing is a bad idea, see this question.
Related
In the PWA, I would like to give a feature where it will show user's mobile number and after tapping on call button within PWA, actual mobile call should get triggered.
I couldn't find any reference or documentation for this. Please let me know how to achieve this action ?
If you want to link a phone number, it's really similar to linking a regular website:
+1 (555) 555-1234
This works for websites in general, there is nothing special about it being in a PWA.
If you want even more information about telephone links, this article is pretty good: https://css-tricks.com/the-current-state-of-telephone-links/
It's from 2016 so browser support is even better. There's a bunch of info in there about SEO and country codes as well.
Note : read both answers below, thery helped us.
Original question:
Want to show appropriate deep link : http://en.wikipedia.org/wiki/Mobile_deep_linking so if android and no our app installed : show android app link, else html page link
App sends email to users. Want to be able to change links depending on device. If desktop - as is. If mobile go thru mail body and add "m." to all the href OR other link if our native app installed.
Do mobile mail clients run js?
Do I need to encode the js in anyway. Tried google but not able to get the right keywords to search for. End up on page about send grid or using js to send an email.
I want js inside email body. I know can change template at server, but want it to be dynamic to current client. So same email opened on desktop -> desktop links ; inside mobile app or browser - mobile links.
Or other html solution would be cool. W3 are you listening?
You can show/hide links depending on device using media queries. Try this:
<style>
#media only screen and (max-device-width: 500px) {
a[class=mobileLink] {
display: inline !important;
font-size: 24px !important;
}
a[class=desktopLink] {
display: none !important;
}
}
</style>
<!-- Starting link switching technique -->
HTML page link
<a href="link/for/mobile/version" class="mobileLink" style="display:none;
font-size:0px">Mobile page link</a>
<!-- End link switching technique -->
Yes, Outlook ignores display:none but if the link is just text, font-size:0px should take care that.
Want to show appropriate deep link : http://en.wikipedia.org/wiki/Mobile_deep_linking so if android and no our app installed : show android app link, else html page link
This cannot be done in emails, but it can be done in landing pages, like the web version of your email.
App sends email to users. Want to be able to change links depending on device. If desktop - as is. If mobile go thru mail body and add "m." to all the href OR other link if our native app installed.
This can be done by using media queries to hide/show desktop or mobile content when appropriate. (Responsive emails.)
Do mobile mail clients run js?
No -- security issues.
Do I need to encode the js in anyway. Tried google but not able to get the right keywords to search for. End up on page about send grid or using js to send an email.
There's nothing you can do to get JS to work in email clients. It just won't work.
I want js inside email body. I know can change template at server, but want it to be dynamic to current client. So same email opened on desktop -> desktop links ; inside mobile app or browser - mobile links.
Once again, this can be done using media queries. (Responsive emails.) There are some drawbacks, but I suggest doing a Google search for "Responsive Emails" to get started.
Or other html solution would be cool. W3 are you listening?
There's nothing they can do in the email world. Unlike web browsers, where there are set standards, in the email world, anything goes.
Edit: Although using media queries to show the appropriate link/button for the devices, it's not a bulletproof solution. The best solution is to use your web server's power to determine where the user should go, depending on their user agent or viewport size.
There is a more modern solution, that is supported natively by mobile platforms.
On ios it's called universal links and on Android app links.
I'm having an issue where I have a number displayed on my webpage that is NOT a phone number (it's a simple confirmation number without a link, just text on a page) is being converted in to a clickable link to call the number for ios users on mobile devices. It's basically treating it as though I have made the number a link with a tel: protocol, even though it has no such markup. has anyone else seen this, and is there any way to fix it?
These are the various options that i have tried using table structure for newsletters. My problem is that on the click of the phone number on mobile devices and it redirects to a new page having the callto or tel in its url, whereas in browsers it redirects to a blank page. Help me out on this.
9865551555
9865551555
Be sure to include the country code. The format found in this tutorial worked well for me.
(986) 555-5155
my question is analogous to the "mailto:email#email.com" type of link but is more specifically:
if a phone number exists on a page and is viewed by a user on an iphone (phone number will appear as link), is there a way for that link to automatically (upon user clicking) ask the user if they want to add that number to the contact, and then auto fill certain details?
this seems a bit too amorphous to be obviously possible, but you never know.
Nope. Phone numbers will be recognized by Mobile Safari automatically, and be "forced" to be seen as telephone numbers by doing something like this:
555-1212
But you can't control the phone's behavior when the user taps the link. (Cool feature idea though. :) )
It think it's not necessary to use a tel: as a href protocol prefix. I am not sure if something like this validates or is somehow standard. There is also a skype href hack: href="skype:asdasdasd".
Alternative Solution
iOs also detects telephone numbers in text automagically. They just need the right format. See also here for formats: http://hjacob.com/blog/2009/07/making-a-phone-number-clickable-for-iphone-users/