这些小活动你都参加了吗?快来围观一下吧!>>
电子产品世界 » 论坛首页 » 综合技术 » 基础知识 » HTML5视频教程之IphoneX适配方法及源码

共1条 1/1 1 跳转至

HTML5视频教程之IphoneX适配方法及源码

菜鸟
2020-12-17 14:39:31     打赏

IphoneX的适配关键在于怎么让页面适应“齐刘海”、底部操作区域以及大圆角问题。IphoneX相对于其他手机,不同之处在于设备虽同样都是一个屏幕,但其实被分为了好几个模块,具体见下图:


我们正常的一个网页,搬到X上来,效果是内容只显示在SafeArea安全区域,非安全区域部分没有网内容,也就是说头部和底部会出现白块,怎么处理?

解决办法

1.给body加一个background-color

为什么要加background-color?有什么用?注意到我们刚说到的头部和底部会出现白块,其实说是白色其实并不准确,因为这个颜色其实来自于body的背景色。另外,我们上拉或下拉内容时会显示网页下方的内容及颜色,其实也是body的背景颜色。所以如果你想修改这两个效果,就可以设置一下body的背景色。

2.添加viewport-fit=cover的<meta>标签

这一步极为关键。先看一下结果:


复制代码代码如下:

<metaname="viewport"content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0,width=device-width,viewport-fit=cover"/>


为什么说极为关键?iphoneX的主要问题就是除了安全区域外,其他地方不能显示网页内容,而它就是为解决这个问题而量身定制的。当设置了以上内容后,头部和底部就能开放给网页显示内容。

但是用了之后你会发现,区域是开放了,但是内容(常为导航栏)却因为“齐刘海”而被遮挡住了部分内容,并且,发现原本设置的100%的高度并没有占用全部高度空间,怎么办?

对于头部的高度和底部的高度,其实是有匹配值的,如下图:

所以,我们有如下方案处理:

1.修改我们导航栏的高度,为原本高度加上safe-area-inset-top的高度,也就是44px;具体可以这么写:

height:calc(navHeight+44px);,并且重新设置一下导航栏上文案的位置。

2.IOS11的浏览器chromium内核提供了以下内容,也就是我们上图标注的那几个值:

safe-area-inset-top
safe-area-inset-right
safe-area-inset-left
safe-area-inset-bottom


怎么用呢?很简单:

body{
padding-top:constant(safe-area-inset-top);//为导航栏+状态栏的高度88px
padding-left:constant(safe-area-inset-left);//如果未竖屏时为0
padding-right:constant(safe-area-inset-right);//如果未竖屏时为0
padding-bottom:constant(safe-area-inset-bottom);//为底下圆弧的高度34px
}


也许你没见过constant这个东西,我以前也没见过,它也是专为iphoneX而设计的值,注意只有当你的<meta>标签加上了viewport-fit=cover之后,该值才能生效。当然,在android手机上,是不会被识别的。

3.只为IphoneX生效

注意了,我们做的这个适配是只为IphoneX生效的,并不能影响到其他手机,所以我们要做响应式布局,即,使用媒体查询,如下:

//注意这里采用的是690px(safearea高度),不是812px;

@mediaonlyscreenand(width:375px)and(height:690px){
body{
height:100vh;
}
}


有资料说上面这么用是ok的,然而我用着却没啥效果,于是我放宽了点条件,做了修改如下:

@mediaonlyscreenand(width:375px)and(min-height:690px){
body{
height:100vh;
}
}


区别在于我是识别宽度为375px,高度大于690px的设备即为IphoneX。当然,目前只有X这款设备符合该条件。

4.网页高度变化

先强调一下,这部分不太确定,我自己遇到了,提出来说明一下:

设置了viewport-fit之后,会发现原本设置的100%的高度不符合预期了,只占用了部分屏幕空间,其实,不急,只需要作如下修改:

@mediaonlyscreenand(width:375px)and(min-height:690px){
body{
height:100vh;
}
}


vh是检查viewport即视口的高度,1vh=1%视口高度,是个绝对单位。设置100vh的意思就是占满全屏高度

5.导航栏吸顶,任务栏吸底

页面内容可以拉动,如果导航栏也随着滑动,效果很丑,这就需要我们实现导航栏吸顶效果。实现大家都会就不多说,这里展示我的一个案例:

  @mediaonlyscreenand(width:375px)and(min-height:690px){
  div{
  position:fixed;
  display:block;
  z-index:300;
  }
  .bg{
  height:calc(3.5rem+44px);
  }
  p{
  margin-top:44px;
  }
  }


本文只是简单的描述一下如何处理IphoneX的适配问题的具体步骤,如果还想更深入的了解原理,最后想要工作不累就要不断的提升自己的技能,请关注扣丁学堂HTML5培训官网、微信等平台,扣丁学堂IT职业在线学习教育平台为您提供权威的HTML5视频教程系统,通过千锋扣丁学堂金牌讲师在线录制的第一套自适应HTML5在线视频课程系统,让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群:692172929。微信号:codingbb



共1条 1/1 1 跳转至

回复

匿名不能发帖!请先 [ 登陆 注册 ]