上下有黑边解决方案,适配手机端

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

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

原文出处:
林焕彬   

导语:上下有黑边解决方案,适配手机端。 BlackBerryX的出现,一方面对于任何手机行业的上进极具革新领头羊的职能,另一方面也对现有工作的页面适配带来了新的挑衅。
对于手Q中的各业务以来,受中兴X影响的H5页面挺多,应该采纳什么样迅速有效的办法来应对吗?

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

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

  • 在 H5 页面链接一个 iphonex.css 来给 三星 X
    访问的页面增添对应的适配层
  • 在 H5 页面上给相应的 dom 结构丰盛适配的类名

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

通栏页面

顶部通栏

某些事情的一流页面多数选取了顶部通栏banner的功能,由于三星X在气象栏增添了24px的莫大,对于当今通栏banner规范的始末区域会有遮挡意况。

焚薮而田方案:对于通栏页面在页面顶部增加一层高度44px的褐色适配层,整个页面往下挪44px。

那种做法固然不相符苹果须要的设计规范,但由于长期内更新任何banner的老本太高,可以先这么概括处理,后续再优化banner的筹划彰显。

图片 1

底部Tab栏/操作栏

稍许页面使用了底部Tab栏/操作栏,由于MotorolaX去掉了底层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;
  }
}

效果图

相关文章

发表评论

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

*
*
Website