现在的位置: 首页 > 综合 > 正文

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

2018年05月05日 ⁄ 综合 ⁄ 共 895字 ⁄ 字号 评论关闭

本来想使用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浏览器自适应高度有用,但是对于手机就不行了,执行代码效果如下:

把body背景设为蓝色,canvas背景设为红色,大家可以看到二者并未重叠,canvas左上角和body左上角不重合导致上边和左边留有蓝色空白,而且还有滚动条,使用JS代码获取body的宽高度:

//获取屏幕宽度与高度

gWinHeight = document.body.clientHeight;

gWinWidth = document.body.clientWidth;

alert(gWinWidth + "," + gWinHeight);

结果为(304, 486),但是我的iPhone4的屏幕宽度是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>

抱歉!评论已关闭.