zoukankan      html  css  js  c++  java
  • 移动端单屏解决方案

    概述

    很多时候,我们在移动端需要把一整页的内容展现给用户,这个时候就需要移动端使用单屏。这篇博文记录我在写移动端单屏网页时遇到的一些坑,供以后开发时参考,相信对其他人也有用。

    安卓对height:100%的兼容

    如果设置了如下css代码:

    html, body {
        height: 100%;
    }
    

    那么在安卓浏览器上会发生滚动时,body突然增大或减少的情况,这是因为安卓浏览器考虑到了系统导航条的问题。这个极大的影响了体验,解决方法是用js设置body一个固定的值

    swiper

    上面的情况只会在页面本身高度大于屏幕高度时出现(下面要放版权等其它东西)。如果页面本身高度等于屏幕高度就不会出现。

    swiper是业内常用的解决单屏的库。使用它的时候一定要加入下面两行代码,缺一不可

    html, body {
      position: relative;
      height: 100%;
    }
    

    这是swiper初用者经常忽略的地方。

    内滚动与外滚动

    单屏通常会伴随着手指滑动屏幕时切换页面的操作。但是如果页面内有滚动条怎么办?

    有2种解决方法:

    1. 设置swiper的slide不能滚动,然后添加一个导航条来控制滚动。
    2. 设置swiper的slide横向滚动,然后页面内的滚动是竖向滚动。

    那首页的slide需要竖向滚动怎么办?方法是嵌套多个swiper,首页的swiper使用竖向滚动(首页内一般没有滚动条),有滚动条的页面使用另一个横向滚动的swiper。

  • 相关阅读:
    js备忘录3
    js备忘录2
    js备忘录1
    Java-URLEncoder.encode 什么时候才是必须的
    Oracle中的SQL分页查询原理和方法详解
    servlet 和 threadlocal 与 web容器(理解threadlocal)
    技术汇总:第十二章:技术总览
    MongoDB :第五章:MongoDB 插入更新删除查询文档
    MongoDB :第六章:Java程序操作MongoDB
    MongoDB :第二章:系统归纳
  • 原文地址:https://www.cnblogs.com/yangzhou33/p/9123998.html
Copyright © 2011-2022 走看看