修复Mobile Safari(iPhone)上的字体大小问题,其中文本呈现不一致而某些字体比其他字体大?

Cra*_*lot 70 css iphone mobile layout mobile-safari

我们的网站在移动版Safari上呈现不一致的字体大小 - 据我们所知,只有Mobile Safari.这让我们很难过.

我们使用Firebug分析了该站点,并且不正确的区域继承了正确的样式,但字体仍然以错误的大小呈现.

1)访问http://www.panabee.com.

2)搜索域名.

左侧的框显示不正确的字体大小.字体大小应与右侧的字体大小相匹配(框标题和框复制).例如,标题"变奏曲"和"推特"比标题"备用结尾"大得多.

有什么线索的原因?

Joh*_*lor 141

移动Safari(如适用于Android的Chrome,移动版Firefox和IE移动版)会增加宽版块的字体大小(始终如此),这样,如果您双击放大该块(适合屏幕宽度的块) ,文字将清晰可辨.如果设置-webkit-text-size-adjust: 100%(或none),它将无法执行此操作,因此当用户双击以放大宽块时,文本将非常小; 如果用户捏缩放,用户将能够阅读它,但文本将比屏幕更宽,他们必须水平平移才能阅读每行文字!

  1. 理想情况下,您可以通过使用响应式Web设计技术来使您的设计适应移动屏幕尺寸(在这种情况下,您将不再拥有任何非常宽的块,因此移动浏览器将不再调整您的字体大小).

  2. 如果这不是一个选项,并且您无法为移动用户提供桌面网站服务,那么看看您是否可以调整您的设计,这样您的文本块就不会比移动设备的设备宽度更宽(例如,对于许多人像手机来说,320px )(您可以使用特定于移动设备的css来避免影响桌面浏览器),然后Mobile Safari将不需要增加任何字体大小(以及重排文本的浏览器,如Android浏览器和Opera Mobile,也不需要更改你的布局).

  3. 最后,如果您确实需要阻止Mobile Safari调整您可以设置的字体大小-webkit-text-size-adjust: 100%,但这只是作为最后的手段,因为它可能会导致移动用户难以阅读您的文本,因为它可能太小或者在他们阅读的每一行之后,他们必须从一边到另一边平移.请注意,您必须使用100%not,none因为在桌面浏览器中没有一个具有令人讨厌的副作用.也有相当的-moz-text-size-adjust-ms-text-size-adjust属性移动Firefox和IE移动.

编辑:例如在你的情况下,最简单的可能是第二种选择,所以你可以尝试添加以下CSS:

/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {
    table#all_results {
        width: auto;
    }
    td#main_box {
        width: 320px;
    }
    td#side_box {
        width: 320px;
    }
}
Run Code Online (Sandbox Code Playgroud)

虽然这样硬编码320px并不理想; 您可以通过使用各种CSS媒体查询或从JavaScript获取设备宽度来改进.

  • 关于响应式网页设计的探索:在我的探索过程中,有一些情况,特定于设备宽度的响应式设计仍然失败,尽管在 Safari 和 Chrome 的桌面上完美运行,但某些字体在 iPhone 上旋转时只是随机改变大小。这个 CSS 修复( -webkit-text-size-adjust: 100% )似乎是允许开发人员/设计师真正实现响应式设计的关键。我尝试了奇怪的 JavaScript 修复,尽管 <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">,但这个 CSS 实际上有效. (2认同)

Cra*_*lot 39

这是最终起作用的(仅在iPhone 4上测试过):

/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {      
        td#main_box { -webkit-text-size-adjust:100% }               
}
Run Code Online (Sandbox Code Playgroud)

我们给了约翰答案,因为他的解决方案是这个问题的基础.

可能不是最优雅的答案,但它确实有效.

  • 为了完整起见,这是完整的声明:`-webkit-text-size-adjust:100%; -moz文本大小调整:100%;-ms-text-size-adjust:100%;` (2认同)

Web*_*ity 6

-webkit-text-size-adjust: none;会导致您无法放大移动设备.你应该使用100%.