场景:安卓和ios需要嵌套我的H5页面,其中html中设置了禁止缩放事件user-scalable=no,也设置成positiona:fixed,bottom:0固定页面,安卓手机上不会出现问题,但是在ios上会出现的问题是点击几下屏幕会出现白边
注意:不是一进来页面出现白边,是点击几下屏幕之后底部出现白边的bug,由于没有办法返现出来bug,索性自己画了一下,如下图:
后来查了查资料问了问大佬,提供了一个解决思路:
解决思路:禁止轻触事件,但是这种思路下会有一个bug就是所有的功能都没法点击了,所以思路就要改为:功能性的按钮设置成能点击,对于打卡按钮的样式中,添加pointer-events属性,而其他区域点击无效
首先需要介绍一下pointer-events属性是什么
pointer-events属性是一个指针属性,是用于控制在什么条件下特定的图形元素可以成为指针事件的目标。
pointer-events属性有很多值,但是对于浏览器来说,适用于HTML元素的只有三个值,其它的几个值都是针对SVG元素的
pointer-events: visiblePainted | visibleFill | v