ios - Mobile Safari 自动生成调用电话号码的新元素，这会影响设计

Question

我正在设计一个响应式网站，但 header 电话号码在运行 Safari 的 iOS 设备上出现故障。似乎 iOS Safari 添加了一个额外的 <a>带有 tel: 的元素使电话号码可链接的链接:

在桌面浏览器上(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>

在 Safari for iOS 上(通过 XCode 模拟器)

    <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>

现在，我知道可以用这样的东西来定位那个元素:

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

或者原始元素带a.call-now { display:none; }

第一个解决方案的问题是 (1) 如果电话号码发生变化，选择器将无法工作，并且 (2) 电话号码不可点击，除非我指定一个电话:原始元素中的链接，我不想为桌面设备这样做(我想我可以做一个服务器端条件语句来识别用户代理，但这真的是最好的方法吗？)

第二种解决方案的问题是它会在非 iOS 设备上的媒体中断处损害设计。

最好的方法是什么？

Answer 1

删除电话号码周围的a。如有必要，请使用 span 为电话号码设置样式。 Mobile Safari 将插入单个 a 作为 span 的子项——无需担心隐藏重复的 a。 Desktop Safari 不会更改 DOM，电话号码也不可点击。