Javascript 画布元素未在iOS设备上呈现

我的网站上有一个画布元素，可以在桌面浏览器和Android设备上完美呈现，但不会在iOS设备（iPad、iPhone）上呈现——iOS上既没有Safari也没有Chrome。我使用Materialize作为我的CSS框架

我需要在代码中添加一些内容吗

var-next//为间隔初始化
//在轮廓屏幕上绘制随机彩色图案
函数paintCanvas（）{
const c=document.querySelector（“画布”）；
const ctx=c.getContext（“2d”）；
c、 宽度=窗宽；
常数宽度=c.宽度；
const height=612；//画布高度
常数min=0；
const max=宽度；
常数yMid=高度/2；
变量y1=yMid；
var y2=yMid；
函数getRandomColor（）{
设r=Math.floor（Math.random（）*256）；
设g=Math.floor（Math.random（）*256）；
设b=Math.floor（Math.random（）*256）；
设color=`rgba（${r}，${g}，${b}，0.5）`；
返回颜色；
}
var x=0；
函数绘制（）{
如果（x==（最大值/2）-2）{
clearInterval（下一个）；
}
ctx.lineWidth=4；//设置行的宽度
ctx.strokeStyle=getRandomColor（）；//指定随机颜色
ctx.beginPath（）；//开始行
ctx.moveTo（x，y1）；//移动原点
ctx.lineTo（max-x，y2）；//转到右下角
ctx.moveTo（x，y2）；
ctx.lineTo（最大x，y1）；
ctx.stroke（）；
如果（y1==0）{
x++；
}否则{
y1--；
y2++；
}
}
next=设定间隔（油漆，0.05）；
}
paintCanvas（）
main{
位置：相对位置；
}
#帆布{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
z指数：0；
}
我通过在Ipad上启用Web Inspector（设置>>Safari>>高级），然后连接到friends Mac电脑，解决了这个问题。在Mac上使用Safari，我能够启用Web Inspector，从而查看苹果的开发工具（设置>>高级>>在菜单栏中显示开发菜单）

我发现我的
元素的宽度返回到零。这意味着
window.innerWidth
要么返回
0
要么返回
null
，从而将画布的大小调整为零宽度，而不是设备的宽度

这让我尝试改用
screen.width
。这就解决了问题。因为我知道
window.innerWidth
可以在所有其他设备上工作，所以我在
navigator.platform
上添加了一个复选框，以便仅在iOS设备上使用screen.width


var-next//为间隔初始化
//在轮廓屏幕上绘制随机彩色图案
函数paintCanvas（）{
const c=document.querySelector（“画布”）；
const ctx=c.getContext（“2d”）；
//____________________________________________
//--------修复此问题----------
//____________________________________________
if（navigator.platform！=“iPad”&&navigator.platform！=“iPhone”&&navigator.platform！=“iPod”）{
c、 宽度=窗宽；
//我将在生产中使用window.innerWidth
}否则{
c、 宽度=屏幕宽度；
}
常数宽度=c.宽度；
const height=612；//画布高度
常数min=0；
const max=宽度；
常数yMid=高度/2；
变量y1=yMid；
var y2=yMid；
函数getRandomColor（）{
设r=Math.floor（Math.random（）*256）；
设g=Math.floor（Math.random（）*256）；
设b=Math.floor（Math.random（）*256）；
设color=`rgba（${r}，${g}，${b}，0.5）`；
返回颜色；
}
var x=0；
函数绘制（）{
如果（x==（最大值/2）-2）{
clearInterval（下一个）；
}
ctx.lineWidth=4；//设置行的宽度
ctx.strokeStyle=getRandomColor（）；//指定随机颜色
ctx.beginPath（）；//开始行
ctx.moveTo（x，y1）；//移动原点
ctx.lineTo（max-x，y2）；//转到右下角
ctx.moveTo（x，y2）；
ctx.lineTo（最大x，y1）；
ctx.stroke（）；
如果（y1==0）{
x++；
}否则{
y1--；
y2++；
}
}
next=设定间隔（油漆，0.05）；
}
paintCanvas（）
main{
位置：相对位置；
}
#帆布{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
z指数：0；
}