页面通用解决方案,适配手机端

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

2017/11/12 · HTML5 · 8
评论页面通用解决方案,适配手机端。 · iPhone
X

原稿出处:
林焕彬   

导语: MotorolaX的产出,一方面对于一切手机行业的上扬极具立异领头羊的功效,另一方面也对现有业务的页面适配带来了新的挑衅。
对于手Q中的各业务以来,受One plusX影响的H5页面挺多,应该使用怎么着神速有效的方法来应对吧?

当下的H5页面可以分成通栏页面和非通栏页面两种,每种页面都可能有底部操作栏,具体如下:

一:本文提供二种缓解方案

  • 在 H5 页面链接一个 iphonex.css 来给 HUAWEI X
    访问的页面扩大对应的适配层
  • 在 H5 页面上给相应的 dom 结构丰裕适配的类名

日前苹果开发者发布后,就把xcode
beta版本换成了GM版本,准备第一时间来尝试自己项目的适配,结果发现下边的标题

通栏页面

顶部通栏

少数事情的一级页面多数选择了顶部通栏banner的意义,由于MotorolaX在状态栏增添了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中的各业务以来,受索尼爱立信X影响的H5页面挺多,应该运用哪些连忙有效的艺术来应对吗?

 

时下的H5页面能够分为通栏页面和非通栏页面三种,每种页面都可能有底部操作栏,具体如下:

 

通栏页面

 

顶部通栏

 

一点事情的一级页面多数运用了顶部通栏banner的效应,由于BlackBerryX在情景栏伸张了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;
  }
}

效果图

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图