尽管浏览器缩放级别保持 div 大小（相对于屏幕）

Question

我正在为我的 iPhone 创建一个书签，它将在屏幕的左上角添加一个滚动菜单。我遇到的问题是，如果我访问一个可以放大的网站，当我放大页面时，我的“浮动”div 会变得更大。有没有办法让我的 div 宽度为 0.2 英寸（可以用卷尺测量），无论我在 Safari 浏览器中放大多远？

谢谢， 奥利弗

Answer 1

这是我最终想出的解决方案（有很多评论。）

//This floating div function will cause a div to float in the upper right corner of the screen at all times. However, it's not smooth, it will jump to the proper location once the scrolling on the iPhone is done. (On my Mac, it's pretty smooth in Safari.) 

function flaotingDiv(){

    //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("fontSizeDiv");

    //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 scroll event:
window.onscroll = flaotingDiv;

Answer 2

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

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

Answer 3

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

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

希望这有帮助。