数字不显示在iPhone / ios上

时间:2017-03-08 10:47:59

标签: html ios css phone-number

所以我试图创建一个包含电话号码的小型联系人部分,但是当我在iPhone上查看它时它不会显示,虽然它显示在桌面上(即使我缩小了屏幕小于我的iPhone)。 (在Chrome和Safari桌面测试) (见图片)

enter image description here

文本显示只有少数数字或只有字母,但会消失。 (见图)

enter image description here

这些数字显然仍然存在(虽然看不见),因为如果我按下它们应该在的位置,它会突出显示文本。 (见图)

enter image description here

如果我继续按下,那么它会询问我是否要拨打该号码。 (见图)

enter image description here

以下是我正在使用的代码片段:

<div class="contact-container">
    <div class="contact-us">
        <h3>Contact Us</h3>
        <div>
            <p><i class="fa fa-map-marker" aria-hidden="true"></i>Munich, Germany</p>
            <p><i class="fa fa-phone" aria-hidden="true"></i>Testing 123 testing</p>
            <p><i class="fa fa-envelope" aria-hidden="true"></i>someone@example.com</p>
        </div>
    </div>
    <div class="private-hire">
        <h3>Private Hire</h3>
        <p class="body-copy-mobile">lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute iruredolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
</div>

任何人都知道为什么会发生这种情况以及如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

我发现IOS会自动将电话号码颜色更改为白色并略微加粗。您还必须选择它作为achor(a)标记。这是我的修复:

.contact-us a {
  color: inherit;
  font-weight: 300;
}