当用户在 Mozilla Firefox 上放大和缩小页面时，如何保持 <div> 的大小不变

Posted 2023-03-06

【中文标题】当用户在 Mozilla Firefox 上放大和缩小页面时，如何保持 <div> 的大小不变

【英文标题】：How to keep a <div> constant in size as the user zooms in and out on the page on Mozilla Firefox

【发布时间】：2018-02-10 16:08:02

【问题描述】：

我已经能够在 Chrome、Safari 和 Opera mini 上的所有缩放级别上设置 DIV 内容常量，但我无法让 Mozilla 应用相同的 javascript 代码在浏览器本身上设置 DIV 常量。当我将缩放级别设置为超过 100% 时，它会将所有 div 内容在 chrome、safari 和 opera mini 上设置为正常，但在 Mozilla 上却相反，所以我问如何将其设置为与其他网络浏览器一样Mozilla 浏览器是否支持下面 JavaScript 命令中的语法，因为这让我抓狂。

 //script to set DIV content constant as user zooms. NOT WORKING ON MOZILLA
 <script>
   function flostingDiva() 
     // How much the screen has been zoomed.
     var zoomLevel = screen.width / window.innerWidth;
     // By what factor we must scale the div for it to look the same.
     var inverseZoom = window.innerWidth/screen.width;
     // The div whose size we want to remain constant.
     var h = document.getElementById("scrollbox4");    

     // This ensures that the div stays at the top of the screen at all times. For some 
     // reason, the top value is affected by the zoom level of the Div. So we need to
     // multiple the top value by the zoom level for it to adjust to the zoom. 
     h.style.top = ((window.pageYOffset + 5) * zoomLevel).toString() + "px";

     // This ensures that the window stays on the right side of the screen at all times. 
     // Once again, we multiply by the zoom level so that the div's padding scales up.
     h.style.paddingLeft = ((window.pageXOffset + 5) * zoomLevel).toString() + "px";

     // Finally, we shrink the div on a scale of inverseZoom.
     h.style.zoom = inverseZoom;    
  

  // We want the div to readjust every time there is a page load event:
  $(function() 
    floatingDiva();
  );        
</script>

【问题讨论】：

避免模棱两可的函数名，它们更难阅读，我们在浏览代码时不知道它们做了什么。大多数错误源于糟糕的编码方式。

FF 根据developer.mozilla.org/en-US/docs/Web/API/Screen/width使用window.screen.width afaik

试试zoomLevel=window.devicePixelRatio。但另请参阅this discussion。

@DarkMukke 首先我没有检测到缩放级别，其次它可以在 chrome、Safari 和 Opera 上运行没有任何问题，该代码，所以我知道必须修复 Firefox

我看到一个拼写错误的函数 flostingDiva()

【参考方案1】：

缩放在 Firefox 中不起作用。您可以改用此代码：

h.style.MozTransform = "scale(" + inverseZoom + ")";
h.style.MozTransformOrigin = ((window.pageYOffset + 5) * zoomLevel).toString() + " " + ((window.pageXOffset + 5) * zoomLevel).toString();

您还可以使用 metas 将初始比例设置为 1 并阻止用户放大：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />