Window.devicePixelRatio 设备像素比，能否获取浏览器页面是否缩放？

设备像素比:物理像素分辨率与CSS 像素分辨率之比。为什么突然写这个api方法？那是因为最近听到一个笑话，用户浏览器缩放了，然后页面不兼容，需要兼容用户缩放的窗口视图！其实，这样的需求前几年出现过：产品经理说，app主题色要根据用户手机壳颜色自动调整。

然后，那个程序员就把产品经理打了一顿。用户怎么操作设备是用户的事情，我们做开发，只考虑正常情况下的正常设备。用户手机屏右上角烂了，咋弄，所有app都兼容一下，右上角不显示内容？？？

针对这个问题，我专门去网上搜了一下，还真找到了解决方案：

function getDetectZoom() {
	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;
};

然后，我用浏览器测试了，还真返回了缩放的比例大小。可是仔细分析了它的代码，发现了它的“坑”：我设备是1920*1080的分辨率，像素比也是一比一的，换了苹果的设备（因为苹果屏幕一直就是超高像素密度），直接返回的就是苹果分辨率的设备像素比。再缩放之后，这个数值不变了。（猜想）

因为这个参数本来就是为了获取超高像素密度的液晶屏设备像素比，而不是用来获取页面是否缩放的！

很明显，这种方式来计算浏览器是否缩放，并不是那么精准，缺点就是苹果的视网膜屏幕（retina),是一种具备超高像素密度的液晶屏，这时再用Window.devicePixelRatio就获取到苹果的这个参数，而且屏幕也并不一定缩放了。不过在PC端还是可以用一下这个方法。

回到场景问题，假如知道了用户的缩放比，还准备对整个HTML进行页面缩放达到100%的效果？这种用户或者说产品经理，很可悲！七娃想说的是：做产品要以用户为中心！但要有设计准则，要以实际完成能力去衡量这个用户需求。天马行空的需求，只能变成茶语笑话。