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

智软工作室主要是为宁波公司提供宁波网站建设,宁波网站制作,宁波做网站公司，宁波外贸网站建设公司,宁波网站优化等项目,以优质的服务，优惠的价格，深的客户信赖。相信有你的加入我们的明天会更有动力！期待与你合作！

2014已经悄然到来，在新的一年我们恭贺所有客户事业蒸蒸日上，同事庆祝智软设计工作室成立5周年，在5周年为众多客户提供了保质量的网站设计与网站制作。我们在新的一年质量与服务将会更加进一步为更多的客户带来高端的网站设计与服务！期待与你合作
智软设计工作室多年为宁波企业网站制作建设服务一直以来我们以最优惠价格，最优质的质量，最突出的设计！得到了客户的一致认可,我们的服务包括：宁波网站设计,宁波网站建设,宁波网站制作,宁波网站优化,宁波英文网站制作我们会以优质的服务,最低的价格来报答客户!
点击连接网站优化推广-对企业的网站优化和网站推广--对企业的重要性-点击进行详细了解
2014开幕，宁波智软设计为宁波企业提供更加优秀的设计和实惠的价格
智软设计工作为宁波客户网站设计案例展示平台-案例均为定期更新，让新老客户更好的看到我们做的案例，点击查看我们做的网站案例吧！
智软(宁波网络公司)帮你轻松解决网络问题，网站一站式解决方案

你当前的位置：首页>>营销与网络

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

2023-08-30 16:46:46

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

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

问客户为什么要缩放，他也没说，按道理这是用户行为，而且是极少数会默认去缩放网页，于是就想到了去获取用户是否缩放了，来改变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 + '%';
});