参考:js自动隐蔽手机浏览器地址栏
文章中完成道理实在很简单,强迫页面高度凌驾手机屏幕高度,手动转动时会隐蔽浏览器自带地址栏和工具栏(qq浏览器不会隐蔽工具栏).
js完成自动隐蔽,
window.onload=function(){setTimeout(function() {window.scrollTo(0, 1)}, 0)}
道理:js模仿用户转动,scrollTo.
然则我试了种种手机浏览器,页面scrollTop确切变了,都没出来结果,能够我的写法有题目吧。
退一步,只能是完成用户转动隐蔽浏览器高低栏了。
先说meta
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="browsermode" content="application">
<meta name="full-screen" content="yes" />
<meta name="x5-fullscreen" content="true" />
<meta name="x5-page-mode" content="app" />
<meta name="360-fullscreen" content="true" />
除了在uc下能够一直隐蔽外,其他浏览器只需路由跳转隐蔽就会失利。
js计划
1.摊开页面高度适配,让页面内容少的状况高度也超越屏幕高度。
题目:手机浏览器自带转动结果很差,假如页面内容许多的时刻,转动不流通。
试过overflow-scrolling: touch;结果很好。
然则视觉上有头部和底部的定位,转动以后只能用position:fixed.
底部定位要做适配,而且fixed有失效题目要处理。
2.better-scroll/vue-scroll插件封装列表转动。
题目:假如全部页面都是列表,会发现用户要转动页面没有动手的处所。
处理:监听页面路由事宜beforeRouteEnter,先制止掉scroll插件的转动。
让用户能够转动页面。
window.onscroll事宜中拿到想要的scrollTop后(浏览器已隐蔽地址栏和工具栏),摊开scroll插件转动。