html5手机自适应代码
2015年02月12日 13:50
0 点赞
0 评论
更新于 2025-11-21 16:18
原本我打算使用 HTML5 的 canvas 开发一个手机小游戏，然而在第一步让 canvas 自适应屏幕大小时就遇到了难题。
最初，我从网上视频里获取了如下代码：
<body style="height: 100%;background-color: blue;">
<canvas id="gameCanvas" style="height: 100%;background-color: red;">
您的浏览器不支持 HTML5 canvas，请换一个浏览器。
</canvas>
</body>
但我发现，这段代码或许对 PC 浏览器自适应高度有效果，可在手机上却行不通。执行该代码后，呈现的效果如下：
我将 body 背景设置为蓝色，canvas 背景设置为红色，结果二者并未重叠，canvas 的左上角和 body 的左上角不重合，导致上边和左边留有蓝色空白，并且页面还出现了滚动条。我使用 JS 代码来获取 body 的宽和高：
// 获取屏幕宽度与高度
gWinHeight = document.body.clientHeight;
gWinWidth = document.body.clientWidth;
alert(gWinWidth + "," + gWinHeight);
运行这段代码后，得到的结果是（304，486）。但我的 iPhone 4 屏幕宽度是 320，高度是 460（算上状态栏是 480）。从计算结果来看，获取到的宽和高明显不准确，我也不清楚这个结果是如何计算出来的。
为了解决这个问题，我从网上查找了大量资料，并逐一进行尝试。最终发现，可以采用以下方法来解决手机 APP 自适应屏幕大小的问题：
<body style="height: 100%;width: 100%;margin: 0;padding: 0;">
<canvas id="gameCanvas" style="height: 100%;width: 100%;margin: 0;padding: 0;display: block;">
您的浏览器不支持 HTML5 canvas，请换一个浏览器。
</canvas>
</body>
通过这种方式，能够让 canvas 更好地自适应手机屏幕大小，避免出现之前的空白和滚动条问题。