position:fixed 在移动端下的问题

        大家好,新来乍到,在这里记录自己在日常工作中遇到的问题,即为了总结,也能和大家做一个分享,希望能给各位提供一些参考。

-------------------进入正题分割线-------------------

       在移动端开发中,大家如果用过fixed 定位就会发现有各种各样的问题,本人在之前的项目中也遇到过多次,不同的场景,不同的解决方案。这次决心总结一下fixed 移动端不同的问题。


position:fixed 在移动端下的问题_第1张图片
mdn  position:fixed 描述

fixed 定位其实是相对与浏览器视口来定位的。如果在desktap上是没有问题的,但是在移动端(包括ipad),存在的一个问题就是浏览器厂商并不支持fixed定位。原因在移动浏览器有两个视口:可视视口和布局视口。浏览器相对于哪个视口定位固定元素?

我们经常碰到的问题是fixed 定位在ios下面,当键盘弹起来的时候发现fixed 定位失效,论坛上面大家给出的解决方案主要是2个:

1: 使用isScroll 这个插件

2:用position:absolute 定位来替代解决(https://www.jianshu.com/p/782e61068334)

站内已经有同学给出来 比较详细的栗子,有兴趣的自行跳转。

      再实际应用中还有另一种情况就是在我们使用第三方ui库的时候,一些model 可能使用了fixed定位,这样在移动端会带来一些意想不到的问题。常见的就是点击穿透,等等问题。

个人建议在移动端项目的时候慎用fixed定位,尽量避免这些bug。

你可能感兴趣的:(position:fixed 在移动端下的问题)