内外有黑边杀鸡取卵方案,适配手提式有线电话

作者: 韦德国际1946国际网址  发布:2019-09-17

小米 X 适配手Q H5 页面通用解决方案

2017/11/12 · HTML5 · 8 评论 · iPhone X

初稿出处: 林焕彬   

导语: 魅族X的面世,一方面前境遇于整个手提式有线电话机行业的前进极具创新领头羊的机能,另一方面也对现成专门的学业的页面适配带来了新的挑衅。 对于手Q中的各业务以来,受黑莓X影响的H5页面挺多,应该运用哪些快速有效的章程来应对吧?

当前的H5页面能够分成通栏页面和非通栏页面三种,种种页面都大概有尾巴部分操作栏,具体如下:

一:本文提供二种减轻方案

  • 在 H5 页面链接贰个 iphonex.css 来给 Nokia X 访问的页面扩张对应的适配层
  • 内外有黑边杀鸡取卵方案,适配手提式有线电话机端。在 H5 页面上给相应的 dom 结构丰裕适配的类名

新近苹果开辟者发布后,就把xcode beta版本换来了核糖霉素版本,准备第有的时候间来试试本人项指标适配,结果发掘上面包车型大巴难点

通栏页面

最上部通栏

有些事情的超级页面比相当多使用了顶端通栏banner的成效,由于一加X在情景栏增添了24px的惊人,对于当今通栏banner标准的原委区域会有遮挡情况。

化解方案:对于通栏页面在页面最上端扩展一层中度44px的雪白适配层,整个页面往下挪44px。

这种做法固然不吻合苹果须要的设计标准,但出于短期内更新任何banner的本钱太高,能够先这么概括管理,后续再优化banner的宏图表现。

图片 1

底部Tab栏/操作栏

有一些页面使用了底部Tab栏/操作栏,由于华为X去掉了底层Home键,取代他是34px中度的Home Indicator ,对于当前的最底层Tab栏/操作栏会变成一定的阻碍。

技术方案:在页面尾巴部分增添一层高度34px的适配层,将操作栏上移34px,颜色能够自定义。

图片 2

1.终极实施方案(最优,提议选用)

iphonex.css

图片 3

非通栏页面

底部Tab栏/操作栏

原因同上,在底部有34px中度的Home Indicator ,对于日前的底层Tab栏/操作栏会促成一定的遏止操作。

不留余地方案:在页面尾部增添一层中度34px的颜色块,将操作栏上移34px,颜色能够自定义。

图片 4

2.web消除方案

 

导语: 小米X的面世,一方面前蒙受于任何手提式有线电话机行当的上扬极具创新领头羊的作用,另一方面也对现成工作的页面适配带来了新的挑战。 对于手Q中的各业务以来,受BlackBerryX影响的H5页面挺多,应该运用什么样飞速有效的办法来应对吧?

 

脚下的H5页面能够分成通栏页面和非通栏页面三种,各样页面都或然有尾巴部分操作栏,具体如下:

 

通栏页面

 

顶上部分通栏

 

一点事情的超级页面大多运用了顶部通栏banner的成效,由于索尼爱立信X在情状栏扩充了24px的冲天,对于当今通栏banner规范的剧情区域会有遮挡景况。

 

化解方案:对于通栏页面在页面顶端扩充一层高度44px的霁青适配层,整个页面往下挪44px。

 

这种做法就算不适合苹果需求的设计标准,但出于长时间内更新任何banner的老本太高,能够先这么简单管理,后续再优化banner的希图表现。

 

图片 5

 

@media only screen and (device-width: 750px) and (device-height: 812px) and (-webkit-device-pixel-radio: 3) {
  /* 增加头部是配层 */
  .has-topbar {
    height: 100%;
    box-sizing: border-box;
    padding-top: 44px;
    &:before {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 44px;
      background-color: #000000;
      z-index: 9998;
      content: '';
    }
  }

  // 增加底部适配层
  .has-bottombar {
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 34px;
    &:after {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 34px;
      background: #f7f7f8;
      content: '';
      z-index: 9998;
    }
  }

  .bottom-menu-fixed {
    bottom: 34px;
  }
}

效果图

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:内外有黑边杀鸡取卵方案,适配手提式有线电话

关键词: html5 日记本 伟德19461111 好东西