javascript - Canvas 元素无法在 iOS 设备上呈现

我的网站上有一个 Canvas 元素，可以在桌面浏览器和 Android 设备上完美呈现，但不会在 iOS 设备(iPad、iPhone)上呈现 - Safari 和 iOS 上的 Chrome 都不会呈现。我使用 Materialise 作为我的 CSS 框架。

我需要在我的代码中添加什么吗？

Here is live version

---

Best Answer-推荐答案

我通过在我的 Ipad 上启用 Web Inspector(设置>>Safari>>高级)然后连接到 friend 的 Mac PC 来解决这个问题。在 Mac 上使用 Safari，我能够启用 Web Inspector，从而查看 Apple 的开发者工具(设置>>高级>>在菜单栏中显示开发菜单)。

我发现我的 <canvas> 的宽度元素正在归零。这意味着 window.innerWidth要么返回0或 null从而将我的 Canvas 大小调整为零宽度而不是设备的宽度。

这让我尝试使用 screen.width反而。这解决了问题。因为我知道 window.innerWidth适用于所有其他设备，我在 navigator.platform 上添加了检查仅在 iOS 设备上使用 screen.width。

关于javascript - Canvas 元素无法在 iOS 设备上呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42700396/