Mobile Safari Automatically Generates New Element for Calling Phone Number Which Compromises Design

Question

I'm designing a responsive site, but the header phone number is malfunctioning in iOS devices running Safari. It seems iOS Safari adds an extra <a> element with a tel: link to make a phone number linkable:

On desktop browsers (Safari 6.1.1, OS X)

     <div class="header-contact clearfix">
        <a class="call-now" title="1-800-810-0259" target="_blank">1-800-810-0259</a>
        <a class="email-now" href="mailto:web@federal-lawyer.com" alt="email us now">Email Now</a>
    </div>

On Safari for iOS (via XCode simulator)

    <div class="header-contact clearfix">
       <a class="call-now" title="1-800-810-0259" target="_blank">1-800-810-0259</a>
       <a href="tel:1-800-810-0259">1-800-810-0259</a>
       <a class="email-now" href="mailto:web@federal-lawyer.com" alt="email us now">Email Now</a>
   </div>

Now, I know can target that element with something like this:

a.call-now + a[href="tel:1-800-810-0259"] { display:none; }

Or the original element with a.call-now { display:none; }

The problem with the first solution is (1) that the selector won't work if the phone number changes and (2) the phone number won't be clickable unless I specify a tel: link in the original element, which I don't want to do for desktop devices (I guess I could do a server side conditional statement identifying the user agent, but would that really be the best way?)

The problem with the second solution is that it compromises the design on non-iOS devices at that media break.

What would be the best way to proceed?

Answer 1

Remove the a around the phone number. Style the phone number with a span if necessary. Mobile Safari will insert a single a as a child of the span—no duplicate a to worry about hiding. Desktop Safari won't alter the DOM, and the phone number will not be clickable.