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

时间:2017-09-01 14:49:10

标签: javascript jquery html css firefox

我已经能够在Chrome,Safari和Opera mini上的所有缩放级别上设置DIV内容不变,但我无法让Mozilla应用相同的JavaScript代码在浏览器上设置DIV常量。当我将缩放级别设置为100%以上时,它会将所有div内容设置为正常的chrome,safari和opera mini,但是在Mozilla上则相反,所以我问我怎样才能将其设置为与其他Web浏览器类似# 39; s并且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>

1 个答案:

答案 0 :(得分:0)

缩放在Firefox中不起作用。你可以改用这段代码:

$ bash /home/user/path/to/create_venv.sh

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

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