原创声明

本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：https://www.jianshu.com/u/4876275b5a73
邮箱：job_tom@foxmail.com
CSDN ID：tom_wong666

如题，注释了大部分代码后，最终发现问题出在段代码上：

//UI设计基础宽度：750px；
ctx.font = "3rem sans-serif";

一开始担心是iOS Safari的壳不支持canvas，查了https://caniuse.com/ 发现其实是支持的。

查询结果如下：

canvas支持情况查询结果

项目中做了移动端rem适配的(在基础UI设计宽度为750px的情况下，1rem=12.5px)，

document.documentElement.style.fontSize = document.documentElement.clientWidth / 60 + "PX"；

所以直接用了rem，但是iOS Safari只支持标准的canvas，标准的canvas只支持px不支持rem。

所以这个问题解决方案是将rem转换回px，如下：

//UI设计基础宽度：750px；
ctx.font = 3*12.5+"px sans-serif";

但是移动端有各种宽度的屏幕，为了适应各种屏幕是不能写死，所以最终下法应该如下：

//获取设备宽度
let  clientWidth = document.documentElement.clientWidth;
//根据设计图中的canvas font字体的占比进行设置
let fontWidth = clientWidth*3*12.5/750;
//设置自适应的字体大小
ctx.font = fontWidth+"px sans-serif";