How can I display a phone number as a link on mobile but not desktop?
Question
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.
3 answers
solution1
2 2020-07-20 17:35:06
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.
solution2
0 2020-07-20 17:13:33
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>
solution3
0 2020-07-20 17:21:01
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 (eg 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:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.