使用jq写的普通1920*1080页面适配4k电视屏幕

因为项目需要，不能使用vue或者其他高端的框架，必须要双击点就能看的情况下，所以选择了用jq来写，后面写完需要部署到现场的电视屏幕上，自测后发现用1920*1080分辨率写的页面不匹配设备，于是查了一下资料，参考了网上一些代码，在此就把方法记录一下，参考的地址是这里：https://blog.csdn.net/weixin_43915406/article/details/127221814
jq页面直接引入的一个js，js内容如下：

$(function() {
// 按照1920*1080比例-适配4k屏幕
	const m = detectZoom();
	//判断屏幕是否为4k
	if (window.screen.width * window.devicePixelRatio >= 3840) {
		switch (m) {
			// 4k屏时屏幕缩放比为100%
			case 100:
				document.body.style.zoom = 100 / 50;
				break;
				// 4k屏时屏幕缩放比为125%
			case 125:
				document.body.style.zoom = 100 / 62.5;
				break;
				// 4k屏时屏幕缩放比为150%
			case 150:
				document.body.style.zoom = 100 / 75;
				break;
				// 4k屏时屏幕缩放比为175%
			case 175:
				document.body.style.zoom = 100 / 87.4715;
				break;
				// 4k屏时屏幕缩放比为200%
			case 200:
				document.body.style.zoom = 100 / 100;
				break;
				// 4k屏时屏幕缩放比为225%
			case 225:
				document.body.style.zoom = 100 / 112.485;
				break;

			default:
				break;
		}
		// document.body.style.zoom = 100 / (Number(m)/2);
	} else {
		document.body.style.zoom = 100 / Number(m);
	}
	/* 适配4K比例方法 */
	function detectZoom() {
		let ratio = 0,
			screen = window.screen,
			ua = navigator.userAgent.toLowerCase();
		if (window.devicePixelRatio !== undefined) {
			ratio = window.devicePixelRatio;
		} else if (~ua.indexOf('msie')) {
			if (screen.deviceXDPI && screen.logicalXDPI) {
				ratio = screen.deviceXDPI / screen.logicalXDPI;
			}
		} else if (
			window.outerWidth !== undefined &&
			window.innerWidth !== undefined
		) {
			ratio = window.outerWidth / window.innerWidth;
		}
		if (ratio) {
			ratio = Math.round(ratio * 100);
		}
		return ratio;
	}
});

如此大功告成，还有些许样式不太兼容的再局部调整就好，还有一些电视上是不支持比较先进的js语法的（es6+几乎都不支持），所以这点也要注意。