Iphone 保持div大小（相对于屏幕），而不考虑浏览器的缩放级别

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

谢谢，

---

Oliver

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

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

---

希望这能有所帮助。

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

//此浮动div功能将使div始终浮动在屏幕的右上角。然而，它并不平滑，一旦iPhone上的滚动完成，它将跳转到正确的位置。（在我的Mac电脑上，它在Safari中非常流畅。） 函数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；由于某种原因，百分比宽度不能与我的Div配合使用，这是我第一次尝试的，但之后我的Div的背景会消失。是的，我在发布这个问题后用谷歌搜索了更多的内容后看到了这一点，我可以计算缩放级别并动态更改Div的大小，终于想出了我在下面提供的解决方案。 //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;