固定在chrome mobile上的位置导致元素向上/向下滚动
Luc*_*nte 26 html mobile scroll google-chrome css-position
我正面临这个奇怪的问题,看起来像Chrome手机上的一个错误.
我有一个位置的div:固定; 对齐到屏幕的右上角.在桌面上,它在移动设备上工作正常(它保持原位),然而,当我向上或向下滚动时,div正在移动.我制作了一个视频来更好地解释它:
https://www.youtube.com/watch?v=gCgN6ULkcMg
在向上滚动工作正常
在向下滚动时,一个位置为div的div消失在视口外
我试图在小提琴上隔离问题,但无法重现它.因此,我将整个网站封装在一个小提琴中,问题就此停止了.我还是不明白为什么.
网站隔离在一个小提琴:删除*
直播网站:删除*
此外,我在现场网站上对不同的设备进行了一些测试:
- Chrome移动版:错误
- Chrome桌面:工作正常
- Firefox手机:工作正常
- Safari mobile:工作正常
有人可以解释我为什么Chrome Mobile有这个问题,而其他人没有？
我的立场:固定div看起来像这样:
div {
position:fixed;
top:10px;
left:0;
width:100%;
text-align:right;
}
*删除了链接,因为它是客户的网站.解决方案在下面的答案中.
Luc*_*nte 69
我发现.
出于一些上帝遗弃的原因,我心爱的谷歌浏览器在移动设备上需要在视口元素上达到最小比例= 1.
<meta name="viewport" content="minimum-scale=1">
它现在有效.
- 这很有用,但它不仅仅是需要的:如果我不使用"user-scalable = no",它也适用于我,因此用户仍然可以根据需要进行缩放.关键成分似乎是"最小规模= 1". (3认同)
- 谢谢。也帮了我一把！ (2认同)
- 这有效，“position:sticky”也对我有效（没有这个） (2认同)
- 并补充说：在我的情况下，Chrome 似乎调整了比例，以使某些元素进入视野，而这些元素在 _horizontally_ 中突出显示。如果除此问题之外还有意外的水平滚动，那么这也可能是奇怪的垂直滚动的根本原因。 (2认同)
- 但是使用 minimum-scale=1 会消除网站的响应能力，那么如何纠正呢？ (2认同)
- 使用固定位置时出现同样的问题。将我的元标记更改为：`<meta name =“viewport”content =“width = device-width，initial-scale = 1，minimum-scale = 1”/>`所以我只是添加了`minimum-scale = 1`创建反应应用程序的默认值 (2认同)
- 这对 2022 年的 Chrome 移动设备不起作用 (2认同)
小智 12
问题是meta tag你必须把它放在那里
<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的浏览器变化height的viewport.
- 谢谢，真的花了几个小时试图弄清楚这一点。这个成功了！ (2认同)
| 归档时间： |
|
| 查看次数： |
17336 次 |
| 最近记录： |