踩到的第一个坑:
最近做一个移动端的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;
这个方法对我的问题有效果
此外传送几个博客,还有其他的一些方法,可以试一试,啊,有木有效果还得自己亲测。
https://segmentfault.com/a/1190000007177666
https://www.cnblogs.com/Julia-Yuan/p/7811584.html
https://blog.csdn.net/GrahamACER/article/details/74946060