canvas画的文字在安卓移动设备上可以显示,但是在ios移动设备上无法显示

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

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

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

查询结果如下:

canvas画的文字在安卓移动设备上可以显示,但是在ios移动设备上无法显示
canvas support

 

项目中做了移动端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";