尽管浏览器缩放级别不同，保持div大小（相对于屏幕）的方法是什么？

Question

我正在为我的iPhone创建一个书签小工具，它将在屏幕的左上角添加一个滚动菜单。我遇到的问题是，如果我访问一个可以缩放的网站，当我放大页面时，我的“浮动”div也会随之变大。是否有一种方法可以使我的div无论在Safari浏览器中缩放多少，都保持0.2英寸宽（可以用卷尺测量）？

谢谢， Oliver

- Oliver

Answer 1

这是我最终想出的解决方案（带有很多注释）。

//该浮动div函数将导致div始终浮动在屏幕的右上角。然而，它并不平滑，在iPhone滚动完成后，它会跳到正确的位置。 （在我的Mac上，在Safari中相当平滑。）
function flaotingDiv(){
//屏幕被缩放了多少。
    var zoomLevel = ((screen.width)/(window.innerWidth));
    //我们必须按什么比例缩放div才能看起来相同。
    var inverseZoom = ((window.innerWidth)/(screen.width));
    //我们想要保持大小不变的div。
    var h = document.getElementById("fontSizeDiv");
//这确保div始终保持在屏幕顶部。由于某种原因，顶部值受到Div的缩放级别的影响。因此，我们需要通过乘以缩放级别来使顶部值调整为缩放。
    h.style.top = (((window.pageYOffset) + 5) * zoomLevel).toString() + "px";
//这确保窗口始终位于屏幕右侧。再次，我们乘以缩放级别，以使div的填充缩放。
    h.style.paddingLeft = ((((window.pageXOffset) + 5) * zoomLevel).toString()) + "px";
//最后，我们根据inverseZoom比例缩小div。
    h.style.zoom = inverseZoom;
}
//我们希望每次滚动事件发生时div都会重新调整大小：
window.onscroll = flaotingDiv;

- Oliver

Answer 2

您可以使用百分比位置和宽度，这些不受缩放影响。

在JavaScript中捕获浏览器的“缩放”事件

- Delan Azabani

---

百分比宽度出了些问题，我的Div无法正常工作。这是我尝试过的第一种方法，但是我的Div背景会消失。 - Oliver

Answer 3

Safari iPhone - 如何检测缩放级别和偏移量？

你可能还想查看这个问题的答案，因为它们提供了关于如何计算缩放级别的信息（尽管不建议依赖它来处理重要的事情）。如果其他方法都失败了，有了缩放值，你可以编写一个小脚本来根据它调整你的 div 大小。

希望这能帮到你。

- Valentin Flachsel

---

是的，发完这个问题后我通过谷歌搜索发现了这个。我使用计算缩放级别和动态更改div大小的想法，最终得出了下面提供的解决方案。 - Oliver