HTML5 canvas自适应手机屏幕宽高度大小

最新推荐文章于 2025-05-17 14:41:16 发布

南极娃娃鱼

最新推荐文章于 2025-05-17 14:41:16 发布

阅读量4.8w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： html5 canvas 手机屏幕自适应 canvas手机屏幕自适应

本文链接：https://blog.youkuaiyun.com/wangyuchun_799/article/details/38512699

在尝试用HTML5的canvas开发手机小游戏时，遇到了canvas无法自适应手机屏幕大小的问题。通过设置body和canvas的样式，以及清除内外边距，解决了canvas在手机屏幕上显示不全且与body对齐不准确的难题，实现自适应屏幕效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本来想使用HTML5的canvas做一个手机小游戏，结果第一步canvas自适应屏幕大小就卡住了：

<span style="font-size:14px;"><span style="white-space:pre">	</span><span style="white-space:pre">	</span><body style="height: 100%;background-color: blue;">
		
	<canvas id="gameCanvas" style=" height: 100%;background-color: red;">
		您的浏览器不支持HTML5 canvas，请换一个浏览器。
	</canvas></span>

本来这段代码也是从网上视频搞到的，但是我发现可能这段代码对于PC浏览器自适应高度有用，但是对于手机就不行了，执行代码效果如下：