问题1:移动端项目要求是全屏滚动,用的是 fullpage,上下滚动时安卓正常,苹果手机浏览器上下滚动时会出现底色问题
解决方案:
document.body.addEventListener('touchmove', function (e) {
e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
}, {passive: false});
问题2:移动端用video标签用苹果手机在浏览器上打开和安卓机上打开是不一样的
解决方案:
苹果机默认打开video是全屏的,所以要阻止默认全屏,加上下面这四个属性就可以啦
<video src="#" webkit-playsinline='true' playsinline='true' x5-playsinline x-webkit-airplay="allow" > </video>
webkit-playsinline -----针对I0S9
playsinline------针对IOS10和11 IOS微信浏览器支持小窗内播放
x-webkit-airplay="allow"----------启用AirPlay支持
x5-playsinline----------x5内核video
问题3:移动端隐藏浏览器的地址栏和菜单栏
解决方案:
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='full-screen' content='true' />
<meta name='x5-fullscreen' content='true' />
<meta name='360-fullscreen' content='true' />