Html5 网页页面兼容iPhoneX(便是那末简易)

2021-02-22 19:17 jianzhan

序言

iPhoneX 撤销了物理学功能键,改为底部小黑条,这1修改致使网页页面出現了较为难堪的显示屏兼容难题。针对网页页面而言,顶部(刘海位置)的兼容难题访问器早已做了解决,因此大家只必须关心底部与小黑条的兼容难题便可(即普遍的吸底导航栏、回到顶部等各种各样相对性底部 fixed 精准定位的元素)。

笔者根据查阅了1些官方文本文档,和融合具体新项目中的1些解决工作经验,梳理了1套简易的兼容计划方案共享给大伙儿,期待对大伙儿有一定的协助,下列是解决前后左右实际效果图:

大伙儿都了解,iphoneX,显示屏顶部都有1个齐刘海,iPhoneX 撤销了物理学功能键,改为底部小黑条,假如不做兼容,这些地区就会被遮挡,因而本文讲述下齐刘海与底部小黑条的兼容方式。

几个新定义

安全性地区

安全性地区指的是1个可视性对话框范畴,处在安全性地区的內容不会受到圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)危害,以下图所示:

 

viewport-fit

iOS11 新增特点,iPhone企业以便兼容 iPhoneX 对现有 viewport meta 标识的1个拓展,用于设定网页页面在可视性对话框的合理布局方法,可设定 3个值

值 叙述 auto 默认设置值,跟 contain 主要表现1致。网页页面內容显示信息在safe area内。 viewprot-fit:auto 等同于于 viewport-fit:contain contain 可视性对话框彻底包括网页页面內容(左图)。网页页面內容显示信息在 safe area 内。 viewport-fit:contain cover 网页页面內容彻底遮盖可视性对话框(右图)。网页页面內容填满显示屏。 viewport-fit:cover

constant 涵数

iOS11 新增特点,Webkit 的1个 CSS 涵数,用于设置安全性地区与界限的间距,有4个预订义的自变量(企业是px):

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

留意:网页页面默认设置不加上拓展的主要表现是 viewport-fit=contain,必须兼容 iPhoneX 务必设定viewport-fit=cover,要不然 constant 涵数是不起功效的,这是兼容的必要标准。

  • 官方文本文档中提到未来 env() 要更换 constant () ,现阶段还不能用
  • 这两个涵数全是 webkit 中 css 涵数,能够立即应用自变量涵数,仅有在 webkit 核心下才适用
  • constant :对于iOS < 11.2下列系统软件
  • env :对于于iOS >= 11.2的系统软件

留意:网页页面默认设置不加上拓展的主要表现是 viewport-fit=contain ,必须兼容 iPhone 务必设定 viewport-fit=cover ,这是兼容的重要流程。

兼容事例

第1步:设定网页页面在可视性对话框的合理布局方法

<meta name='viewport'  content="width=device-width, viewport-fit=cover"  />

第2步:网页页面行为主体內容限制在安全性地区内

body {
  /* 兼容齐刘海*/
  padding-top: constant(safe-area-inset-top);  
 /* 兼容底部黑条*/
  padding-bottom: constant(safe-area-inset-bottom);
}

第3步:fixed 元素的兼容

bottom 并不是0的状况

/* bottom 并不是0的状况 */
.fixed {
  bottom: calc(50px(原先的bottom值) + constant(safe-area-inset-bottom));
}

吸底的状况(bottom=0)

/* 方式1 :设定内边距 拓展高宽比*/
/* 这个计划方案必须吸底条务必是有情况色的,由于拓展的一部分情况是追随外器皿的,不然出現镂空状况。*/
.fix {
  padding-bottom: constant(safe-area-inset-bottom);
}
/* 立即拓展高宽比*/
.fix {
  height: calc(60px(原先的高宽比值) + constant(safe-area-inset-bottom));
}

/* 方式2 :在元素下面用1个空div填充, 可是情况色要1致 */
.blank {
  position: fixed;
  bottom: 0;
  height: 0;
  width: 100%;
  height: constant(safe-area-inset-bottom);
  background-color: #fff;
}
/* 吸底元素款式 */
.fix {
  margin-bottom: constant(safe-area-inset-bottom);
}

最终: 应用@supports

由于仅有有齐刘海和底部黑条的机型才必须兼容款式,能够用@support相互配合应用:

@supports (bottom: constant(safe-area-inset-bottom)) {
  body {
    padding-bottom: constant(safe-area-inset-bottom);
  }
}

详细检验编码

@supports防护适配方式

由于仅有有齐刘海和底部黑条的机型才必须兼容款式,能够用@support相互配合应用:

@mixin iphonex-css {
  padding-top: constant(safe-area-inset-top); //为导航栏栏+情况栏的高宽比 88px
  padding-top: env(safe-area-inset-top); //为导航栏栏+情况栏的高宽比 88px
  padding-left: constant(safe-area-inset-left); //假如未竖屏时为0
  padding-left: env(safe-area-inset-left); //假如未竖屏时为0
  padding-right: constant(safe-area-inset-right); //假如未竖屏时为0
  padding-right: env(safe-area-inset-right); //假如未竖屏时为0
  padding-bottom: constant(safe-area-inset-bottom); //为底下圆弧的高宽比 34px
  padding-bottom: env(safe-area-inset-bottom); //为底下圆弧的高宽比 34px
}

@mixin iphonex-support {
  @supports (bottom: constant(safe-area-inset-top)) or (bottom: env(safe-area-inset-top)) {
    body.iphonex {
      @include iphonex-css;
    }
  }
}

@media 新闻媒体查寻

@mixin iphonex-css {
  padding-top: constant(safe-area-inset-top); //为导航栏栏+情况栏的高宽比 88px
  padding-top: env(safe-area-inset-top); //为导航栏栏+情况栏的高宽比 88px
  padding-left: constant(safe-area-inset-left); //假如未竖屏时为0
  padding-left: env(safe-area-inset-left); //假如未竖屏时为0
  padding-right: constant(safe-area-inset-right); //假如未竖屏时为0
  padding-right: env(safe-area-inset-right); //假如未竖屏时为0
  padding-bottom: constant(safe-area-inset-bottom); //为底下圆弧的高宽比 34px
  padding-bottom: env(safe-area-inset-bottom); //为底下圆弧的高宽比 34px
}

/* iphonex 兼容 */
@mixin iphonex-media {
  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    body.iphonex {
      @include iphonex-css;
    }
  }
}

填补

留意项

env 和 constant 仅有在 viewport-fit=cover 情况下才可以起效, 上面应用的safari 的操纵台能够检验仿真模拟器中网页页面打开web inspector.

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。