PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > HTML5+CSS3教程 > 正文

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

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:本来想使用HTML5的canvas做一个手机小游戏,结果第一步canvas自适应屏幕大小就卡住了:<span style="font-size:14px;"><span style="whit...
    本来想使用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浏览器自适应高度有用,但是对于手机就不行了,执行代码效果如下:

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

    把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>


    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-142-2815-1.html
    相关热词搜索: canvas自适应手机