【Html5】使Canvas适应不同设备

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

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

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的尺寸

 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;
        }