Can I use media queries to detect whether a device can make phone calls?

Question

Okay, let me be specific: I do NOT want to base this on screen size because new mobile devices with bigger and better viewports are coming out all the time. Also, I am quite reticent to use JavaScript to detect this because many mobile devices still fail to support it (Yes, I'm looking at you, iOS Safari & Opera Mini)

It seems obvious to me that CSS3 media queries ought to have a parameter that detects whether the media being used is a cell phone, tablet, or PC. Does anyone know what that might be?

The reason I ask is that while converting my site to Google's mandated RWD, I want to use CSS to show a button that just calls my business from mobile phones, but a button that links to a "Contact us" page on PCs. And as a theoretical purist / mathemagician, I don't want to have to serve different mobile site pages than PC pages. I want it all unified under the Godhead of RWD thru pure CSS.

Thank-you so much for humoring my perfectionism and contributing as able. :) Debbie

There's no such things as browsers are trying to prevent this kind of fingerprinting of the user. I also do not believe you should assume people will want to only call you, When I open a `tel:` link on any device without direct phone capability, it will still open something (skype in my case), and because of the protocol it knows what to do with this data regardless. Otherwise you could just check the media query, I guess. — somethinghere, Jan 01 '21 at 16:35

score 1 · Answer 1 · answered Jan 01 '21 at 16:24

There's no direct CSS-only way to detect if a device can place calls. However, more often than not, these devices are held in an upright position, so you could possibly target them with an orientation:portrait media query. Just keep in mind that this approach could produce some false positives with some tablets or other devices, so you should probably add a width restriction too. Here's what might work for you:

@media only screen and (orientation: portrait) and (max-width: 479px){
  /* place your css here */
}

Here's a handy CSS3 media query guide: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

score 1 · Answer 2 · answered Jan 01 '21 at 17:17

This may generate some false positives and false negatives. In general phones have touche screen pointer: coarse and does not have the hover: none capability. Some tablets can't make calls but it will be detected here, and you can use a mouse with your phone if it supported and that will make it undetected as a phone.

<html>
 <meta charset="utf8">
 <head>
   <style>
     @media (hover: none) and (pointer: coarse) {
       .has-phone {
         display: block;
       }
      .has-no-phone {
         display: none;
       }
      }
     @media (hover: hover) and (pointer: fine) {
       .has-phone {
          display: none;
        }
       .has-no-phone {
          display: block;
        }
      }
   </style>
 </head>
 <body>
    <a href="#" class="has-phone">Call US</a>
    <a href="#" class="has-no-phone">Contact US</a>
  </body>
</html>

score 0 · Answer 3 · answered May 05 '15 at 23:41

Unfortunately, no. There's no media query value to be able to detect whether a device can make calls or not and, even if there was, it probably wouldn't always be accurate or would give you unintended side effects. For instance, my desktop browser can make calls via Google Voice, but if clicking on contact launched GV to make a call I would curse you to the ends of the Earth.

Using handheld doesn't work because not all phones identify themselves as handhelds (in fact most id as screen), and some tablets could as well.

Ultimately, if the two click options are a must and javascript is a must not, your best bet for the most accurate (though as you note, not 100% accurate) selection of phone vs other is to use a size query.

All of this being said, I think that if you investigate further, you'll probably find a design solution that can accommodate both use cases in an elegant way. One button that is used differently in different contexts is likely to be frustrating - particularly for users who visit the site on different media and are expecting consistency.

Can I use media queries to detect whether a device can make phone calls?

3 Answers3