canvas 判断不同的手机，设置不同的画布宽高

最新推荐文章于 2024-08-28 11:38:52 发布

原创最新推荐文章于 2024-08-28 11:38:52 发布 · 591 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

JavaScript 专栏收录该内容

62 篇文章

订阅专栏

本文介绍了一种使用JavaScript识别不同移动设备的方法，如iPhone、iPad和Android手机，并根据设备类型调整HTML5 Canvas元素的宽度和高度，以实现响应式设计。通过获取视口尺寸并设置画布大小，确保了在各种设备上都能获得良好的视觉效果。

canvas 判断不同的手机，设置不同的画布宽高

用canvas时候，引用这个 js 可以识别移动设备，来实现不同的设备，画布不同的宽高。

var ua = navigator.userAgent;
var system = {
	win: false,
	mac: false,
	x11: false,
	//mobile
	iphone: false,
	ipad: false,
	ios: false,
	android: false,
	winMobile: false
};

//
var p = navigator.platform;
system.win = p.indexOf('Win') == 0;
system.mac = p.indexOf('Mac') == 0;
system.x11 = (p == 'x11') || (p.indexOf('Linux') == 0);

system.iphone = ua.indexOf('iPhone') > -1;
system.ipad = ua.indexOf('iPad') > -1;
system.android = ua.indexOf('Android') > -1;



/**
 *
 * 识别移动设备
 * 检测相应的设备。
 * */

var canvas = document.getElementById('myCanvas');

var ua = navigator.userAgent;
var system = {
	win: false,
	mac: false,
	x11: false,
	//mobile
	iphone: false,
	ipad: false,
	ios: false,
	android: false,
	winMobile: false
};

//
var p = navigator.platform;
system.win = p.indexOf('Win') == 0;
system.mac = p.indexOf('Mac') == 0;
system.x11 = (p == 'x11') || (p.indexOf('Linux') == 0);

system.iphone = ua.indexOf('iPhone') > -1;
system.ipad = ua.indexOf('iPad') > -1;
system.android = ua.indexOf('Android') > -1;

function getViewPort() {
	var viewHeight = window.innerHeight || document.documentElement.clientHeight;
	var viewWidth = window.innerWidth || document.documentElement.clientWidth;
	console.log(viewHeight, viewWidth);
	if (system.iphone) {
		//alert(viewWidth,viewHeight);
        //这里是设置画布的宽度与页面的宽度一致，注释下以备后用。
		// document.getElementById("myCanvas").style.width = viewWidth;
		// document.body.style.width = viewWidth;
        // ios 系统下的宽高
		canvas.width = viewWidth;
		canvas.height = viewWidth;
	} else if (system.win) {
		// win 系统下的宽高
		canvas.width = viewWidth;
		canvas.height = viewWidth;
		
	}else if (system.android) {
	//安卓手机时，设置的宽高
		canvas.width = viewWidth;
		canvas.height = viewWidth;
	}
}

getViewPort();