700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html5 移动端字体问题 踩坑之移动端显示字体大小问题

html5 移动端字体问题 踩坑之移动端显示字体大小问题

时间:2022-03-14 18:54:48

相关推荐

html5 移动端字体问题 踩坑之移动端显示字体大小问题

踩到的第一个坑:

最近做一个移动端的h5,一开始拿到设计稿后,发现有几个区域字体换算之后在iphone6上是小于12px的,就有一个问题了,谷歌对小于12px的字体,是不做处理的。按理说,设计上应该要避免类似情况,之前做了很多的页面,还没有小字号的存在,所以准备自己先找找解决办法,不行的话,再沟通一下。

查找发现网上基本都是需要使用· transform:scale()来解决,并配合 transform-origin:top center.但是此类方法在缩小字体的同时,容器也会被缩小(例如div宽为200px,想要显示字号为8px,假如当前字体大小为16px,则需要缩放0.5,缩放完后发现div宽也缩小了,变成100px,但是我们不想要这样的效果,所以用此方法时,当scale值为x时,需要先将容器大小先缩放1/x,然后再使用transform:scale(x)),这样的做法比较繁琐,如果页面内容不多,可以使用。

如果内容是固定的,也可以使用图片来加载。

踩到的第二个坑:

web使用手机模拟器显示的字号和在手机上打开的不一致。本来高高兴兴的在模拟器上显示完美,但是一用手机打开,字号变的很大[同样的字号有的地方可以正确显示,有的却不能]。这下有点头大了,之前没遇到过。

(内心: 觉得不可思议... 有点过分....)

有的说这是Chromium内核提高移动端文本可读性的一个特性,叫做这个特性被称做「Text Autosizer」,又称「Font Boosting」、「Font Inflation」。当文本数量太多,计算机认为在屏幕上显示这么多文本会导致用户不能清晰阅读时,他会自动设置font-size的大小,这个时候得到不同的字体大小的效果,

[移动端浏览器这样做真的好吗???]

解决办法:

给*设置 -webkit-text-size-adjust: none;

这个方法对我的问题有效果

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。