mg4377娱乐娱城官网_mg4377娱乐手机版_www.mg4377.com

当前位置: mg4377娱乐娱城官网 > www.mg4377.com > 正文

页面通用技术方案,上下有黑边竭泽而渔方案

时间:2019-09-28 07:13来源:www.mg4377.com
中兴 X 适配手Q H5 页面通用施工方案 2017/11/12 · HTML5 · 8评论 · 页面通用技术方案,上下有黑边竭泽而渔方案。iPhoneX 初稿出处:林焕彬    导语: iPhoneX的面世,一方面前遇到于整个手提

中兴 X 适配手Q H5 页面通用施工方案

2017/11/12 · HTML5 · 8 评论 · 页面通用技术方案,上下有黑边竭泽而渔方案。iPhone X

初稿出处: 林焕彬   

导语: iPhoneX的面世,一方面前遇到于整个手提式有线电话机行当的开发进取极具创新领头羊的功用,另一方面也对现成职业的页面适配带来了新的挑衅。 对于手Q中的各业务以来,受金立X影响的H5页面挺多,应该运用什么样火速有效的法子来应对吧?

近期的H5页面能够分成通栏页面和非通栏页面二种,各类页面都恐怕有尾巴部分操作栏,具体如下:

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

  • 在 H5 页面链接三个 iphonex.css 来给 BlackBerry 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缓和方案

 

导语: NokiaX的产出,一方面对于一切手提式无线话机行当的腾飞极具立异领头羊的效果,另一方面也对现成职业的页面适配带来了新的挑战。 对于手Q中的各业务以来,受摩托罗拉X影响的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;
  }
}

效果图

编辑:www.mg4377.com 本文来源:页面通用技术方案,上下有黑边竭泽而渔方案

关键词: 日记本 HTML5 好东西