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