移动端 滚动隐藏浏览器地址栏和工具栏

更新日期: 2019-03-18阅读: 6.5k标签: 移动端

文章中实现原理其实很简单,强制页面高度超过手机屏幕高度,手动滚动时会隐藏浏览器自带地址栏和工具栏(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插件滚动。

参考:js自动隐藏手机浏览器地址栏


链接: https://www.fly63.com/article/detial/2423

移动端如何强制页面横屏

有些机型有些app不能横屏:比如Android的微信就没有横屏模式,而ios的微信能开启横屏模式。解决办法就是在竖屏模式下,写一个横屏的div,然后设置rotate正(负)90度,把他旋转过来;而且如果用户切到横屏时,需要把rotate复原,要求也能正常展现。

ios移动端,js时间操作getTime(),getFullYear()等返回显示NaN的解决办法及原因

在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间,而在iOS上缺不能正常显示,显示的时间为:NaN-NaN-NaN ,例如getTime()在ios上拿不到时间戳显示NaN

再聊移动端页面的适配

因为对于一枚前端而言,天天和页面打交道(H5页面),那么布局的活总是少不了,这也将面临不同终端的适配问题。不知道你是否和我一样,页面布局总是或多或少会有一些蛋疼的事情发生。

解决移动端点击穿透问题_h5实现移动端点击事件穿透的多种解决方案

移动端点透现象的解决办法:解决方案一:来得很直接github上有个fastclick可以完美解决;解决方案二:用touchend代替tap事件并阻止掉时A元素touchend的默认行为preventDefault(),从而阻止click事件的产生;解决方案三:延迟一定的时间(300ms+)来处理事件...

移动端开发注意问题

这篇文章主要总结移动端页面开发时需要注意的一些问题。比如:防止手机中网页放大和缩小、format-detection设置、上下拉动滚动条时卡顿慢 、禁止复制选中文本...

js实现移动端微信禁止字体被放大或缩小,防止排版错乱

由于微信webvie内置了调整字体大小的功能,如果用户调整了这一设置,就会导致了网页中的字体比原本的尺寸偏大或偏小,使得网页可能出现排版错乱,或者字体太小看不清的情况发生

阻止移动端浏览器点击图片会预览的几种方法

在移动端部分浏览器中点击了图片,变成了查看图片的效果,怎么防止img的图片被手机浏览器的图片查看器打开呢?下面整理了一些方法来实现:在img元素上添加 onclick=return false、背景图的方式插入、使用js事件阻止默认行为的方式

移动端300ms延迟的解决方法

移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟。也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果。

移动web开发之视口viewport_浅谈移动端中的视口

在 PC 端,视口指的是浏览器的可视区域,其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源,给 CSS 布局限制了一个最大宽度。而移动端则较为复杂,它涉及到三个视口:布局视口(Layout Viewport)、视觉视口(Visual Viewport)和理想视口(Ideal Viewport)

手淘H5移动端适配方案flexible源码分析

随着技术的飞速发展,当前lib-flexible适配方案也在逐渐被更新的适配方案所替代,但是截止目前为止,还没有发现哪种方案能完全满足适配各种机型的需要,也会有一些小的问题。lib-flexible是目前用到的比较成熟的适配方案

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!