调整合适的画布尺寸（游戏）

White feathe

发布于 2021-12-08 15:12:00

1.4K0

发布于 2021-12-08 15:12:00

1、处理尺寸调整

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <title>处理尺寸调整</title>
    </head>
    <style>
        body{margin: 0 auto;overflow-x: hidden;}
        #container{margin:0 auto;width:480px;height: 100%;}
        canvas{background-color:#04be02}
    </style>
    <script src="../build/jquery.min.js"></script>
    <script src="vconsole.min.js"></script>

    <body>
        <div id="container">
            <canvas id="game" width="480" height="480"></canvas>
        </div>
    </body>
    <script>         

        //等待document.ready回调
        $(function(){
            window.scrollTo(0,1);//去除地址栏

            var maxWidth = 480;
            var maxHeight = 440;
            var initalWidth = $("#game").attr("width");
            var initalHeight = $("#game").attr("height");
            var handleResize = function(){
                //获得窗口宽度和高度
                var w = window.innerWidth,h = window.innerHeight,newDim;

                console.log(w +"---" + h + "---" + newDim +"---" + initalWidth + "---" + initalHeight + "---" + (w <= maxWidth));

                if(w <= maxWidth){
                    newDim = {
                        width:Math.min(w,maxWidth),
                        height:Math.min(h,maxHeight)    
                    };
                    $("#game").css({"position":"absolute",left:0,top:0,"z-index":10000});
                    $("#container").css("width","auto");
                }else{
                    //
                    newDim = {
                        width:initalWidth,
                        height:initalHeight
                    };
                    $("#game").css("position","relative");
                    $("#container").css("width",maxWidth);
                }
                $("#game").attr(newDim);//让游戏知道页面大小
            };

            $(window).bind("resize",handleResize)
            handleResize();

            //阻止防止滚动、缩放。
            $(document).on("touchmove",function(event){
                event.preventDefault();
            });

        });

    </script>

</html>

2、去除地址栏

可以使用另一个技巧来获取更多一点的页面实际使用面积，那就是去除IOS设备上的地址栏，可以使用页面加载完之后稍稍滚动页面的招术来实现。

利用：

window.scrollTo(0,1)//去除地址栏

PS：只有在页面内容长于一整页时，这一招才奏效；那么，就出现问题了，地址栏的移除还会影响所获取的页面的 innerHeight。你希望画布的大小调整成占据整个页面，解决这一问题，可以简单的把容器元素的高度设置成一个比没有没有地址栏情况下的最终高度还要大得已知值，然后滚动窗口，来重新计算 innerHeight。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <title>处理尺寸调整</title>
    </head>
    <style>
        body{margin: 0 auto;overflow-x: hidden;}
        #container{margin:0 auto;width:480px;height: 100%;}
        canvas{background-color:#04be02;}
    </style>
    <script src="../build/jquery.min.js"></script>
    <script src="vconsole.min.js"></script>

    <body>
        <div id="container">
            <canvas id="game" width="480" height="480"></canvas>
        </div>
    </body>
    <script> 
        //去除地址栏，等待document.ready回调
        $(function(){

            var maxWidth = 480;
            var maxHeight = 480;
            var initalWidth = $("#game").attr("width");
            var initalHeight = $("#game").attr("height");
            var touchDevice = !!('ontouchstart' in document);

            var handleResize = function(){
                //获得窗口宽度和高度
                var w = window.innerWidth,h = window.innerHeight,newDim;

                console.log("w:"+w +"---h:" + h  +"---initalWidth:" + initalWidth + "---initalHeight:" + initalHeight + "---" + (w <= maxWidth));

                //确保内容比页面大
                if(w <= maxWidth && touchDevice){
                    $("#container").css({height : h * 2});
                }

                window.scrollTo(0,1)//去除地址栏

                //得到的高度了，scrollto可能已经改变了innerheight
                h = window.innerHeight;
                if(w <= maxWidth){
                    newDim = {
                        width:Math.min(w,maxWidth),
                        height:Math.min(h,maxHeight)    
                    };
                    $("#game").css({"position":"absolute",left:0,top:0});
                    $("#container").css("width","auto");
                }else{
                    //
                    newDim = {
                        width:initalWidth,
                        height:initalHeight
                    };
                    $("#game").css("position","relative");
                    $("#container").css("width",maxWidth);
                }
                $("#game").attr(newDim);//让游戏知道页面大小

            };
            var resizeEvent = touchDevice ? 'orientationchange' : 'resize';//用来判断是
            $(window).on(resizeEvent,handleResize)

            //阻止防止滚动、缩放。
            $(document).on("touchmove",function(event){
                event.preventDefault();
            }); 
            handleResize();

        });

    </script>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2016/05/03 ，如有侵权请联系 cloudcommunity@tencent.com 删除

ios