I have <div> with a <p> tag containing a phone number. In CSS I have the property with color: #000 . However, only in Safari, it is not working. The phone is white.
It's like Safari was putting the color on its own.
Color property in css not working in IOS Safari
3
asked by anonymous 04.06.2014 / 15:28
3 answers
6
This is most likely due to the fact that most mobile operating systems automatically identify phone numbers and create a link of them with the smartphone dialer to "facilitate" the user's life .
To remove this functionality in browsers / webviews, there are basically two solutions:
Solution 1: Use ta metatag format-detection :
<meta name="format-detection" content="telephone=no">
This prevents phone numbers from being converted in the HTML page in question.
Solution 2: Trick using elements inline :
<!-- Poderia ser qualquer elemento inline -->
<span>9911-</span><span>2233</span>
Separating the phone into multiple elements makes the algorithm life that identifies numbers difficult, so they are not identified and consequently altered.
04.06.2014 / 17:46
1
I used a solution presented here and another from another forum and solved the problem.
Safari does not recognize css because of the "dialer" function. Chrome recognizes css
If you use the metatag here proposed, the site would lose usability since clients would have to copy or memorize the number to call
Then I did the following:
I used the proposed meta tag here: <meta name format-detection" content="telephone=no"> (thanks, good tip)
And I put a HREF on the phone: <a href="#">#
16.10.2015 / 15:04
1
I did the following form and it worked:
HTML
<span>(99) 9999-9999</span>
CSS
span {color:#000000;}
span a {color:#000000;}
Even though there is no <a> in HTML I considered it as if it existed in css. It worked fine here.
11.12.2017 / 13:21