0

I have a number listed on the website that I'd like to be a callable link when the user is on a mobile phone, but not be displayed as a link when on desktop. I can do this as: a href="tel:5550005555">555-000-5555 /a for the mobile view but how can I get rid of that a tag when on desktop? Thanks for any help.

pkc21
  • 27
  • 6
  • 1
    Does this answer your question? [How to disable link to phone number when on Desktop?](https://stackoverflow.com/questions/15425356/how-to-disable-link-to-phone-number-when-on-desktop) – Aniket Kariya Jul 20 '20 at 17:09
  • 2
    You should not do this. You should use `tel:` in all cases for a phone number. Leave it up to the user agent to display the number for your users. You're assuming users don't make phone calls from their desktop, when many of them do. – user229044 Jul 20 '20 at 17:15
  • 1
    Also, note that "desktop" doesn't mean you can't dial a phone. Safari on Mac can make calls using your iPhone. Plus lots of SIP/VoIP providers have browser plug-ins that call phone numbers from a desktop experience. – Bryce Howitson Jul 20 '20 at 17:15
  • I would just writting media query for the specific max-width and then simply when use hit on that break point just do display none. – danny Jul 20 '20 at 17:25

3 Answers3

2

I would definitely recommend leaving phone numbers available for call on desktop as well because a lot of people actually do use those with certain apps like RingCentral or WhatsApp.

If you still want to do it and don't want to display:none on desktop, what you can do is (this is not best practice) have 2 phone numbers, one with tel: and one without and use a media query to show either. Like this:

<span class="phone-desktop">123-123-1234</span>
<a class="phone-mobile" href="tel:1231231234">123-123-1234</a>

//styles

.phone-mobile{display:none};

@media (max-width: 1440px){ //this will only show desktop
    .phone-desktop{display:none}
    .phone-mobile{display:block}
}

Again, to reiterate, it's better to just use tel: for both and not have to do any of this, because it's not best practice to duplicate code also its not user-friendly to click something you think is a link, but it does nothing. But besides that, this should probably get it done. Let me know if you need any help with it still.

josephT
  • 822
  • 1
  • 7
  • 16
0

I have found this over the internet, with this you can check whether the user viewed your page on Mobile devices or in desktop.

<html>
<head>
    <title>Mobile Test</title>
</head>
<body>

    <p id="text"></p>

    <script type="text/javascript">
        var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
        var element = document.getElementById('text');
        if (isMobile) {
            element.innerHTML = "You are using Mobile";
        } else {
            element.innerHTML = "You are using Desktop";
        }
    </script>
</body>
</html>
Sarang M K
  • 261
  • 3
  • 9
0

you can use the CSS3 @media feature in order to specify the size of the screen and give this former that satifies the condition a specific CSS style (e.g. you could hide the element)

this is a usage example from W3SCHOOLS:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

for further information, please take a look at this content:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Raki Lachraf
  • 99
  • 1
  • 8