Here’s something interesting yet simple to share for a long time. If you are wondering and debugging countless hours for a very simple thing such as color change on a number format in ipad or iphone, you might just arrived to the correct blog post. We all know that debugging CSS and HTML in ipad or iphone isn’t an easy task although we can emulate the environment, there are certain things we cannot emulate such as the behavior of the ipad or iphone OS itself. Interestingly, a client of mine faced such issue with their website where his ‘contact’ number listed on his website was changed to blue instead of white as declared on the css file when view on ipad or iphone.
Now, the odd thing is that even the emulator is showing the colors correctly. Debugged for a few hours without any luck but notice that whenever i added alphabet into the numbers, it changes back to the correct colors. I though it was some javascript but it wasn’t. In the end, i disabled the whole CSS and notice something different on the emulator and the ipad. Weirdly, ipad and iphone treat numbers as a link because it can be a contact on safari. Therefore, it automatically wrapped around a group of numbers with an anchor link on a web page. Therefore, your CSS declaration have to write something like
.style{
color: blue
}
and added something like
.style, .style a{
color: blue
}
if you wish to cater to ipad or iphone on your website. Even if you do not have a mobile stylesheet, ipad or iphone will still behave this way. Therefore, for any group of numbers on your website, just take note of such behavior on mobile devices such as iphone or ipad.
Like this post? Share it!
No related posts.
