CSS "position:fixed": 移动端缩放

Question

CSS "position:fixed": 移动端缩放

javascripthtmlcsscss-positionmobile-browser

8

我正在尝试解决移动浏览器上CSS“position:fixed”属性的问题。我有一个固定的div：

<div id="logo">
...other content here...
</div>

使用CSS：

#logo{
    position: fixed;
    -webkit-backface-visibility: hidden;
    bottom: 100px;
    right: 0px;
    width: 32px;
    height: 32px;
}

通常情况下，div位置总是在窗口的右下角，与滚动位置无关，这是期望的行为。我的问题是，在移动浏览器上，当用户缩放页面时，超过一定的缩放级别，div位置就会出现错误（有时候div会消失在窗口之外）。

我知道fixed position在移动浏览器上支持不好，但我想知道是否有一些解决方法。我在onScroll事件上尝试了这段JS代码：

window.addEventListener('scroll', function(e){
    drag.style['-webkit-transform'] = 'scale(' +window.innerWidth/document.documentElement.clientWidth + ')';\\I want to avoid zoom on this element
    var r = logo.getBoundingClientRect();
    var w = window.innerWidth;
    var h = window.innerHeight;
    if(r.right != w){
        rOff = r.right - w;
        logo.style.right = rOff;
    }
    if(r.top+132 != h){\
        tOff = r.top + 132 - h;
        logo.style.bottom = tOff;
    }
});

很遗憾，代码似乎返回了错误的位置。
有没有人有什么提示？

- user3098549

你能否修复视口，使用户无法缩放？ - Chris Pateman

1

不，我想让用户有缩放页面的可能性。 - user3098549

1

不是百分之百没有工作示例，但你看到的错误位置可能是因为固定的 div 相对于文档而不是相对于窗口。所以当你放大时，它仍然在右下角，但超出了屏幕。你能把它放在 jsfiddle 上吗？ - Chris Pateman

我认为在jsfiddle上无法测试它，因为代码是在结果iframe内执行的，所以除非您缩放整个页面，否则无法对其进行缩放。 - user3098549

4个回答

1

您想知道如何检测当前是否正在使用缩放功能吗？

虽然没有 window.onZoom 监听器，但您可以参考以下线程： JavaScript 中捕获浏览器的“缩放”事件

以及这个答案：https://dev59.com/LXNA5IYBdhLWcg3wWscA#995967

无法主动检测缩放。我在这里找到了一个很好的入口，可以尝试实现它。我发现有两种方法可以检测缩放级别。一种检测缩放级别变化的方法依赖于百分比值不会缩放的事实。百分比值相对于视口宽度，因此不受页面缩放的影响。如果插入两个元素，一个使用百分比位置，另一个使用相同位置的像素，它们将在页面缩放时移动。找到两个元素位置之间的比率，就可以得到缩放级别。请参见测试用例。http://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff3 您也可以使用上面帖子中的工具来执行此操作。问题是您或多或少地在猜测页面是否已经缩放。这在某些浏览器中效果更好。如果他们在缩放状态下加载您的页面，则无法确定页面是否已缩放。

- grubino

1

请在答案中提供相关信息。现在的方式是，一旦链接失效，它就会变得无用。 - toniedzwiedz

我不需要捕获缩放是否处于活动状态，因为我已经捕获了该事件。我想知道如何根据缩放比例因子获取元素的正确偏移量。似乎这个问题只发生在iOS设备上，且缩放比例大于1.4倍。 - user3098549

@user3098549，您可以为特定设备创建一个单独的样式表，并在那里处理偏移量...这不是一个选项吗？<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" /> - grubino

这不是我想要解决的问题...我的问题是关于缩放，而不是设备屏幕大小。 - user3098549

0

这只是一种理论，但您可能希望尝试将底部/右侧位置设置为百分比而不是像素。

我认为当使用像素测量时，您看到的只是缩放影响像素。或者更好地说，当您放大时，像素会变得更大，这会使元素的位置偏移，甚至在较小的屏幕上将其推出视口。

使用像素定位的示例
请注意，即使在桌面上，当您放大和缩小时，该元素似乎也会上下移动？

使用百分比定位的示例
在此示例中，该元素似乎始终位于右下角，因为它始终位于视口底部的10％处。

#logo{
    position: fixed;
    -webkit-backface-visibility: hidden;
    bottom:10%;
    right: 0; 
    width: 32px;
    height: 32px;
}

- apaul

0

在标志和页面其余部分上具有两个不同的z-index可能会有所帮助。只允许对页面其余部分进行缩放，而不是包含标志的z-index层。因此，这可能不会影响标志的拉伸。

我们可以：

实现一个ZOOM监听器
将其附加到浏览器
使用z-index作为因素，使缩放侦听器更改元素的缩放级别（修改元素的位置）。

- Satt

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user3098549 · Accepted Answer

好的，这是我解决问题的方法...希望能帮助任何人在iOS设备上模拟固定位置。

我将位置从fixed改为absolute;
附加一个监听器到窗口，以便在页面滚动或缩放时获取新位置，并使用以下函数设置window.onscroll和window.onresize事件：

function position() {
    drag.style.left = window.innerWidth + window.pageXOffset - 32 + 'px';
    drag.style.top = window.innerHeight + window.pageYOffset - 132 + 'px';
}