/    Sign up×
Community /Pin to ProfileBookmark

Disable link when page not displayed on phone

Copy linkTweet thisAlerts:
Mar 26.2016

I have created a site with Bootstrap. Within this site, I have a Contact Us page which includes a phone number that I want to use as a link if the visitor is on a phone browser. Right now, in my CSS, I have set a media style for tablets and desktop sizes so that the link appears to be regular text (meaning in normal black color, without the underline or hand icon). However, if the user somehow clicks on the phone number, it still attempts to use the link. Is it possible, either in JavaScript or CSS, to make it so that the link is disabled altogether or at least change the href to #?

Chris Cote

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@Kevin2Mar 26.2016 — My iPhone recognizes a phone number and makes it "clickable" without any markup. On one website I have a roster of members with name, address, phone numbers, and email. It's just a table that's built from a database with PHP. So the phone number markup looks like this:
[code=html]<td>555-1212</td>[/code]
Tap on that with an iPhone and a dialogue appears: "Call 555-1212?". On a computer it's not clickable, but can be copy/pasted. Don't know what the Android behavior is.

As an added bonus iOS also recognizes email addresses and makes them clickable as well. Again, no extra markup required.

Correction: I can't swear to that last statement now that I think about it. I have <a href="mailto:blah"> markup around the addresses to make them clickable on computers. YMMV.
Copy linkTweet thisAlerts:
@jedaisoulApr 16.2016 — Given what Kevin2 has said, it seems that you need to suppress or disguise the phone number when the page is displayed on a mobile device. There are many ways of doing that, e.g. [b]display:none;[/b] etc... Which you use depends on what fits in with the rest of your CSS.
×

Success!

Help @chrscote spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.13,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...