固定在chrome mobile上的位置，导致元件上下滚动移动

Question

我面临着一个奇怪的问题，它看起来像Chrome mobile上的一个bug。

我有一个位置：固定的div；与屏幕右上角对齐。在桌面上，它工作正常（它保持在原位），但在移动设备上，当我上下滚动时，div正在移动。我制作了一个视频来更好地解释它：

https://www.youtube.com/watch?v=gCgN6ULkcMg

向上滚动工作正常

在向下滚动时，一个位置：固定的div片段消失在视口之外

我试图把问题孤立起来，但无法重现。所以我把整个网站封装在一把小提琴里，这个问题就不再出现了。我还是不明白为什么。

孤立在小提琴中的网站：已删除*

直播网站：已删除*

此外，我在不同的设备上进行了一些测试，在实时网站上：

• Chrome mobile:漏洞

有人能解释一下为什么Chrome Mobile有这个问题，而其他人没有？

我的位置：固定div看起来像这样：

div {
  position:fixed;
  top:10px;
  left:0;
  width:100%;
  text-align:right;
}

*删除了链接，因为它是客户的网站。答案如下所示。

Answer 1

你的一些元素离开视口，因此AndroidChrome自动缩放视口。减少像视口这样更大的元素。

Answer 2

问题是元标签你必须放在那里

<meta name="viewport" content="height=device-height, 
                      width=device-width, initial-scale=1.0, 
                      minimum-scale=1.0, maximum-scale=1.0, 
                      user-scalable=no, target-densitydpi=device-dpi">

这是因为Chrome浏览器更改了视口的高度。

Answer 3

我发现了。

出于某种上帝不可原谅的原因，我心爱的移动设备上的Google Chrome要求视口元上的最小比例为1。

<meta name="viewport" content="minimum-scale=1">

现在可以了。