H5 --（解决）ios的webview中上/下拉露出黑灰色背景问题

问题描述：手机H5页面在ios的webview中，下拉（或上拉）会露出黑灰色背景

解决思路

1、touchmove 时阻止系统的默认滑动事件

document.querySelector('body').addEventListener('touchmove', function(e) {e.preventDefault();
})

结论：这个方法在安卓上能好使，但在ios上并无作用。（注意：不要用 ‘touchstart’ ，会影响其他元素的fastclick事件）

2、下拉（或上拉）时，固定定位的元素并不会随着移动，所以可将整个body设置为固定定位即可（虽简单，但亲测有效）

body {position: fixed;  /* 固定定位 */left: 0;top: 0;
}

结论：这个方法在ios上能满足需求，但适应的场景是：body的高度不超过webview可视范围的高度。切记 ~

H5 --（解决）ios的webview中上/下拉露出黑灰色背景问题相关推荐

解决ios的webview中上/下拉露出黑灰色背景问题
解决ios的webview中上/下拉露出黑灰色背景问题问题描述:手机H5页面在ios的webview中,下拉(或上拉)会露出黑灰色背景 ,感觉很不好看,现在想要去掉这个背景解决方法: 1.touc ...
H5解决IOS橡皮筋问题(改进Vue)
H5解决IOS橡皮筋(改进Vue) 在ios系统中,页面在上下滑动的时候,会触发橡皮筋问题,页面的顶部和底部跟着页面一起滑动的问题,下面就讲一下如何解决这种问题. 1.iOS如何阻止"橡皮筋 ...
h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题
h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题参考文章: (1)h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题 (2)https://www.cnblogs.com/bl ...
解决VS在高DPI下设计出的Winform程序界面变形问题
解决VS在高DPI下设计出的Winform程序界面变形问题参考文章: (1)解决VS在高DPI下设计出的Winform程序界面变形问题 (2)https://www.cnblogs.com/BenP ...
解决 iOS 11 webview 顶部空白条的问题
在 iOS 11 使用 webview 发现顶部会有一个空白条,怎么也去不掉,通过设置 contentInsetAdjustmentBehavior = UIScrollViewContentInse ...
ios html5 拍照旋转,H5 解决ios拍照旋转90度
var img_photo=''; function selectFileImage(fileObj) { var formdata = new FormData(); var file = file ...
H5解决IOS端无法使用摇一摇功能，解决监听devicemotion失效问题
IOS端无法使用摇一摇功能,主要方法是对devicemotion的监听,devicemotion如果不清楚是做什么的,可以找下度娘. DeviceMotion 到底是何物? 在 window 对象中存 ...
H5解决IOS拍照横屏问题,含后端上传
IOS这个照片横屏问题相信困扰了不少程序猿,作者当时也是寻找各种解决办法,前端处理试过,后端处理也试过,base64也用过,无奈没有更好的方法,今天这个问题可以说是完美解决了,废话不多说直接撸代码 ...
解决iOS 上拉边界下拉出现白色空白
起因: 如标题所示,还被运营吐槽了,为什么别人的没有解决: body,html {width: 100%;height: 100%;position: fixed;top: 0;right: 0;b ...

H5 --（解决）ios的webview中上/下拉露出黑灰色背景问题

问题描述：手机H5页面在ios的webview中，下拉（或上拉）会露出黑灰色背景

解决思路

H5 --（解决）ios的webview中上/下拉露出黑灰色背景问题相关推荐

最新文章

热门文章