iPhone 上的 Safari 中的数字看起来不同

Question

我有一个简单的片段，其中包含一个由一个字母和 12 个数字组成的 phone 数字，它是一个 p 元素内的简单文本，在桌面浏览器中看起来一切正常，但在 iPhone 浏览器字母 p 看起来不错，但其余数字看起来很小并且有换行符。

 p.style3 {
  font-size: 3rem !important;
  font-family: Georgia, "Times New Roman", Times, serif !important;
  text-rendering: optimizeLegibility;
  font-style: italic;
  font-weight: lighter;
  white-space: nowrap;
 }

<p class="style3">p. 706.467.3000</p>

为什么 iOS 上的 Safari 显示此行为？

Answer 1

尝试根据手机屏幕更改字体大小这里是代码

这应该有效

@media only screen and (min-device-width : 414px) and (max-device-width : 736px) { 
p.style3 {
  font-size: 3rem !important;
  font-family: Georgia, "Times New Roman", Times, serif !important;
  text-rendering: optimizeLegibility;
  font-style: italic;
  font-weight: lighter;
  white-space: nowrap;
 }
}

Answer 2

试试这个 (http://codepen.io/sergdenisov/pen/ZGBEvR):

HTML:

<meta name="format-detection" content="telephone=no"/>
<p class="style3">p. 706.467.3000</p>

CSS:

p.style3 {
    -webkit-text-size-adjust: 100%;
    font-size: 3rem !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
    text-rendering: optimizeLegibility;
    font-style: italic;
    font-weight: lighter;
    white-space: nowrap;
}

P.S. <meta> 应该在 <head>.

iPhone 上的 Safari 中的数字看起来不同

Numbers look different in Safari on iPhone

html

css

webfonts