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?
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.
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.
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
I have a fairly simple HTML page with a link on it that calls a phone number.
<a href="tel:1234567890%2C%2C9#">Call Us<a/>
The idea is to call the number 1234567890, have two pauses, then dial 9 followed by the pound symbol.
This works fine when viewing the page in Mobile Safari. The confirmation displays and you can call the number.
If I enable Web App mode (using apple-mobile-web-app-capable) and add it to my home screen, the link stops working. As soon as I remove the # at the end the link starts working again.
I've tried various things but the link simply stops responding to a click no matter what as long as it contains the # symbol. Is this some sort of security restriction since in Web App mode it no longer asks for confirmation to dial a number?
I have the same problem.
Did you came up with a solution?
It must be possible to find a workaround because when I'm dialing such a number from my contacts the # character is not a problem.
Edit: it appears to be an Apple security measure:
here!
try use \u0023 instead of a plain #
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/