Html5使Canvas适应不同设备

Posted 2022-12-03 zhangjk1993

1. viewport

首先我们要在网页中加入viewport，如下。其中user-scalable=0表示禁止用户缩放大小

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0">

2.判断手机还是电脑访问

使用下面代码判断是否电脑访问，其中any判断任意类型的手机，调用方式为isMobile.any()

var isMobile = 
        android: function () 
            return navigator.userAgent.match(/Android/i);
        ,
        BlackBerry: function () 
            return navigator.userAgent.match(/BlackBerry/i);
        ,
        ios: function () 
            return navigator.userAgent.match(/iPhone|iPad|iPod/i);
        ,
        Opera: function () 
            return navigator.userAgent.match(/Opera Mini/i);
        ,
        Windows: function () 
            return navigator.userAgent.match(/IEMobile/i);
        ,
        any: function () 
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
        
    ;

3.设置canvas的尺寸

下面的代码用来手机和电脑访问时canvas分别对应的大小

 var isPhone = isMobile.any();
        if (isPhone) 
            //如果是手机访问，将canvas大小设为网页可见的大小，乘以0.96是为了四边留些空隙
            canv.width = parseInt(window.innerWidth * 0.96);
            canv.height = parseInt(window.innerHeight * 0.96);
         else 
            canv.width = 300;
            canv.height = 500;
        

完整代码地址： https://github.com/zhangjikai/CodeTemplate/blob/master/html5/FixCanvasSizeOnDevice.html 演示地址： http://zhangjikai.com/demo/html/FixCanvasSizeOnDevice.html
以此为基础的写的小游戏地址： http://zhangjikai.com/game/coverit/index.html