栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

修复了Mobile Safari(iPhone)上的字体大小问题,该文本显示不一致,并且某些字体比其他字体大吗?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

修复了Mobile Safari(iPhone)上的字体大小问题,该文本显示不一致,并且某些字体比其他字体大吗?

移动Safari(例如适用于Android的Chrome,移动Firefox和IEMobile的Chrome)会一直增加宽块的字体大小,因此,如果您双击以放大该块(使块适合屏幕宽度),文字将清晰易读。如果设置

-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
    因为在桌面浏览器中没有一个会有讨厌的副作用。移动Firefox和IE Mobile 也具有等效项
    -moz-text-size-adjust
    -ms-text-size-adjust
    属性。

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

@media only screen and (max-device-width: 480px) {    table#all_results {        width: auto;    }    td#main_box {        width: 320px;    }    td#side_box {        width: 320px;    }}

像这样硬编码320px并不理想;您可以通过使用各种CSS媒体查询或从Javascript获取设备宽度来改善这一点。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/568316.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号