2018-05-02 SPA IPhone X适配笔记

body {

background-color:#fbf9fe;

  height:100%;

  width:100%;

}

#app {

height:100%;

  overflow-y:scroll;

  -webkit-overflow-scrolling:touch;

}

.router-view {

padding-bottom:constant(safe-area-inset-bottom);

  padding-bottom:env(safe-area-inset-bottom);

}


H5 部分

对于非固定元素,#app开启滚动,.router-view的内容底部加padding,滚动到底部时就可以留一段空间,不会被小黑条挡住。

对于固定元素,只要相应设定边距就可以,比如:

    padding-bottom:constant(safe-area-inset-bottom);

    padding-bottom:env(safe-area-inset-bottom);

iOS客户端

webView要把bounces设为NO,防止在拖动页面时,由于scrolllView的弹性,出现页面露底。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在前段时间上了热搜的iPhone-x 想必大家就算不知道,都对这个有些许的了解,不知道有都多少基友买了iPhone...
    萧玄辞阅读 2,306评论 0 1
  • 一、 安全区域(safe area) 与iPhone6/6s/7/8相比,iPhone X 无论是在屏幕尺寸、分辨...
    衡胖子哇阅读 11,600评论 0 3
  • 本文主要讲解: 原生的iOS项目iPhone X适配很简单,今天我主要讲解一下web APP 应用的适配 1、熟悉...
    Gaizka阅读 4,357评论 0 3
  • 因为 iPhone X 的刘海设计,Web 在 iPhone X 横屏时,可能会有些问题: 默认情况,iPhone...
    萧玄辞阅读 725评论 0 0
  • 我又再一次的梦见了你,时隔了很多年再梦到你,你似乎憔悴了许多。我难过的也不敢问你过得好不好,只是看着你微笑的向我走...
    安生Ansener阅读 679评论 2 4