获取用户是否缩放网站，解决浏览器缩放后position: absolute;背景移位问题，导致元素和字体对不齐，

最近在帮一个客户制作网站的时候。发现一个问题，就是客户设计稿里面有非常个性的背景，背景上面有一些图标或者文字在上面，又想要文字图标动起来， 所以要做背景然后绝对定位，

但是做完后。给客户，客户截图说没对齐。移位了。我也是很奇怪。一开始以为是兼容的问题，但是发现客户是一样的浏览器，在查了下代码。看起来没问题。然后我突然想到了。浏览器百分比缩放的问题。试了下，果然是这个问题，

问客户为什么要缩放，他也没说，按道理这是用户行为，而且是极少数会默认去缩放网页，于是就想到了去获取用户  是否缩放了，来改变css背景的  background-size

以下代码可用获取用户是否缩放网站：

这里又二个情况。一个是默认进入就会缩放，也就是刷新就获取，

还有一个是在浏览的时候缩放。二个状态都要去改变背景图的background-size属性，

//极端情况，有用户缩放比例，背景也要跟着缩放，
/**/
// 获取窗口的缩放级别
var zoomLevel = window.devicePixelRatio;
//alert(zoomLevel);
// 获取要更改的元素
var element = document.getElementById("productnew");
// 更改元素的样式属性
element.style.backgroundSize = zoomLevel * 100 + '%';



// 获取要更改的元素
var element = document.getElementById("productnew");

// 监听窗口缩放事件
window.addEventListener('resize', function() {
  // 获取窗口缩放级别
  var zoomLevel = window.devicePixelRatio;
  // 更改元素的样式属性
  element.style.backgroundSize = zoomLevel * 100 + '%';
});