1.IOS字号适配
发现问题,是在开发过程中,对比安卓端,iOS端字体的大小显示十分异常。
找问题吧,查阅各种资料,索引到Font Boosting,它是指Webkit 给移动端浏览器提供的一个特性:
当我们在手机上浏览网页时,很可能因为原始页面宽度较大,在手机屏幕上缩小后就看不清其中的文字了。
节选一些评论:
(1)WebKit 中应该有判断如果initial-scale=1
时,不触发Font Boosting。
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 或 -->
<meta name ="viewport" content ="initial-scale=1, maximum-scale=1, minimum-scale=1">
(2)在meta里面加入devide-width或者initial-scale可以限制缩放的。
get到知识点。
不过最后它不适用解决我的问题,再回头仔细查看代码,发现meta中有加initial-scale,不过它针对了安卓和iOS写了不同的initial-scale。
<script src='scripts/common/fixScreen.js'></script>
在<head>中写了一个js,来加载不同的initial-scale,并且设置了user-scalable=no,禁止缩放,
我们先看它的结果:
针对不同的屏,采用不同的方案。
贴出fixScreen.js代码:
;(function(win, lib) {
var doc = win.document;
var docEl = doc.documentElement;
var metaEl = doc.querySelector('meta[name="viewport"]');
var flexibleEl = doc.querySelector('meta[name="flexible"]');
var dpr =