Welcome to WebmasterWorld Guest from 34.207.152.62

Forum Moderators: open

Message Too Old, No Replies

Only Show Text If On A Smartphone?

     
11:09 pm on Oct 30, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member planet13 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:June 16, 2010
posts: 3828
votes: 31


Hi there, Everyone:

I am horrible at javascript, and I have tried finding the answer, but I apologize if this is real easy / already out there.

How do I detect if a visitor is using a smartphone and show a link to ONLY those people visiting on smartphones?

Basically, I am displaying a phone number to ALL visitors (both phone an ddesktop):

Call us at 1-555-555-1234


But I want to display an href tag if they are on a smartphone, such as:

<a href="tel://1-555-555-1234">Call us at 1-555-555-1234</a>


So that they can click on the phone number and it will open their phone app on their smart phone.

But I don't want to display it to desktop users because if they click on it, they will just get a 404 page.

Thanks in advance. Please kindly keep in mind that I hate javascrip (probably more right to say that javascript hates me), so if you could provide a CLEARLY written example, that would be GREATLY appreciated.

~~~~~

P.S. In case you are wondering, we tried just using the text without a link, such as using just:

1-555-555-1234

While that works on MY smart phone, a couple of people tried it out and it doesn't seem to work on their phones (one android, one iphone).

~~~~~

PPS: If this is better handled with server-side scripting instead of JS, please let me know.
9:47 am on Oct 31, 2014 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 16, 2005
posts:2856
votes: 155


As far as I can tell (is is that tel?) there is no way of doing this in JS perfectly:

1) you can detect touch capability in JS - but then you still show the links to tablets and to laptops with touch screens.

2) you can check the user agent on the server, but then you get it wrong for desktops that CAN handle tel: links (e.g. to start a soft phone), or people using fake user agents, etc.

3) You could assume that small screens are phones - but then you still get it wrong for phones with really large screens, or larger devices that can make calls.
12:28 pm on Oct 31, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member planet13 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:June 16, 2010
posts: 3828
votes: 31


Thanks, Graeme.

So what would you do?

I think basically I am going to have to show the link to everyone (smartphones and desktops alike), and just live with having a broken link.

I don't think most desktop users would want to click on a phone number, but if they accidentally hover over the link and see that the cursor changes, they might want to click it. Who knows. People do lots of strange things!
1:56 pm on Oct 31, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5019
votes: 24


These formats should work for automatically linking on both Android and iPhone smartphones:
(555) 555-5555
555 555 5555
555.555.5555

I wonder if using the hCard Microformat [microformats.org] might also indicate to some phones to treat it as a phone number?

In any case, you might be able to use CSS media queries to show the linked version on small resolutions and the non-linked version on high resolutions. It's not a guarantee but may work for most cases.
2:35 pm on Oct 31, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member planet13 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:June 16, 2010
posts: 3828
votes: 31


@ Fotiman

Thanks for the note.

I will probably have to try the formats you suggested later - as well as the CSS suggestion.

I kind of need to get about 15 pages up and running today. Was hoping to have them "perfect" first, but I guess I will get them up first and finish off the phone number thingy later.
2:55 pm on Oct 31, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4157
votes: 262


Only a few mobile phones might be able to decipher the format you are using. There shouldn't be slashes after the colon or dashes in the number. Try
<a href="tel:+12345678901">

which for a US 800 type number would be
<a href="tel:+1800nnnnnnn">


The W3C site does not use the + info from their site: [w3.org...]
Mobile devices have many hardware features that desktop computers donít. The two most obvious are:

Camera: Youíll be hard-pressed to buy a phone that doesnít have a built-in camera these days and we are beginning to see APIs to allow web applications to interface with such devices.
Phone: Letís not forget that the primary purpose of a mobile phone is to call people! This can be smoothly integrated into your website by using the little known tel: protocol. Just like you use a mailto: to link to an email address, you use tel: to link to a phone number. When you click the tel: link it causes the phone to dial

 <code><a href="tel:5121234567">Phone 5121234567 to book a table</a></code> 


Note the inclusion of the phone number in the link text as well ó while this may seem a little repetitious, bear in mind that some browsing devices wonít support the tel: protocol, such as our old friend the desktop computer.
3:11 pm on Oct 31, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5019
votes: 24


Note, don't assume that desktop users will not be able to call the linked phone numbers either. Skype (and I'm sure others) have browser extensions that will recognize these and let you call them.
7:48 am on Nov 1, 2014 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 16, 2005
posts:2856
votes: 155


Yes, but there is no way to test for what a device supports. Either you assume that desktops's do not support tel: links or you just show them to everyone.

Personally, I think the best solution is just to show everyone the link: this is really a failure of the browser to sensibly handle the unknown.

What about adding a help message on hover?
8:21 am on Nov 1, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15443
votes: 739


I think you need to leave some responsibility with the human user. When someone clicks on a phone number, what would they expect to happen? Sure there will be some people who expect their computer to magically dial the number even if they have never set up this functionality, even if the computer is not connected to a phone line. (Computer dialing has been around for a while. I remember my father telling me about his setup at least ten years ago.) No matter what you do, some human somewhere will expect it to work differently-- i.e. in a way that no rational being would ever think of trying. Can't be helped.

What about adding a help message on hover?

A "title" should do, shouldn't it? Wouldn't matter that mobiles don't have a hover, because they're the ones that can definitely place the call.

Corollary worry: If you've got your phone number in plain sight on the page, will this increase junk phone calls? Or do those just not happen any more anyway? (Don't know if it's because someone has started enforcing the Do Not Call registry or just because humans, even at call centers in India, cost more than e-mail.)
9:17 pm on Nov 4, 2014 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 19, 2006
posts: 169
votes: 0


Hi Planet,
I have the same thing on my site and it works great - I didn't use js but just straightforward media queries:
@media only screen and (max-width: 765px) {etc etc }

then on page:
<li><a href="tel:+000000">Call us</a></li>
9:19 pm on Nov 4, 2014 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 19, 2006
posts: 169
votes: 0


And to hide and show, wrapped that in a class:
<ul class="mobiledmenu">

That was hidden normally, then displayed with that media query above - simple and works well.
7:08 am on Nov 7, 2014 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 16, 2005
posts:2856
votes: 155


@Alex_TJ, that will probably show on some phones with large screens, it will show on some small tablets (in vertical mode anyway), and it will not show on desktops with soft-phones.
2:28 pm on Nov 7, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member planet13 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:June 16, 2010
posts: 3828
votes: 31


Corollary worry: If you've got your phone number in plain sight on the page, will this increase junk phone calls? Or do those just not happen any more anyway? (Don't know if it's because someone has started enforcing the Do Not Call registry or just because humans, even at call centers in India, cost more than e-mail.)


I have phone numbers on my business site(s), and yeah, I get a lot of robo-calls, and callers with thick Russian / East European accents, but who refer to themselves as Bob or Joe.

But I also get customers who call by phone as well. They tend to be... ummm... older, and they don't seem to have a whole lot going on in their lives.

They often start off the conversation with something like, "Do you remember me? I bought a widget from you way back in 2001. My name is Bob."
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members