H5 iOS新机型适配

前言

近期在做落地页优化项目中，针对iOS多种新机型（iPhone X之后的刘海屏）适配，有一些坑点，及适配相关的心得，在此记录一下

问题

落地页首屏页面要求铺满全屏，背景图撑满。之前设计稿都是750 * 1134，但是为了适配iPhone X（分辨率375 * 812）类的刘海屏手机，UI多出了一份750 * 1642的设计稿，那么页面首屏的高度需要是屏幕高度，背景图要按两套背景图来，而由于该项目里区分国家，所以一共是2套*3国，6套背景图

解决方案

方案一

首屏dom高度设置为100vh

.first-screen{
      position relative
      width 100%
      height 100vh
      background-size 100% 100%
      background-repeat no-repeat
      background-position center
      margin 0 0 1.26rem
}
           

但是设置vh的方式，在webview页面打开是没有问题的，在iOS Safari浏览器打开，页面下半部分会被导航条挡住，如图所示

查阅资料发现100vh在Safari浏览器上会遇到各种问题，如果你的页面只在webview内打开，使用这种布局是没有问题的，但是我的项目是同时需要在webview和浏览器内打开的，所以这种方法不可取

方案二

使用window.innerHeight获取屏幕高度，动态设置dom高度

html部分

<div
      v-if="config.firstScreen"
      :style="{
        'background-image': `url(${firstScreenBg})`,
        'height': firstScreenHeight
      }"
      class="first-screen part">
           

js部分

const innerHeight = window.innerHeight
...
    data() {
      return {
        logoSrc,
        config: {},
        inited: false,
        firstScreenHeight: `${innerHeight}px`
      };
    },
    computed:{
      firstScreenBg(){
        //针对iOS 375*812 414*896 390*884 428*926屏幕配置对应的背景图
        return (isIPhoneX || isIPhone11 || isIPhone12 || isIPhone12ProMax) ? this.countryUtil.getConfig('getGuides')().imgForIphoneX : this.countryUtil.getConfig('getGuides')().img
      }
    },  
...    
           

判断是否是iPhone X或者iPhone 11等机型

const { devicePixelRatio, screen } = window;
const { width, height } = screen;
export const isIPhoneX = isIOS && (width === 375 && height === 812 && devicePixelRatio === 3) //iphoneX、iphoneXs、iphone11 Pro
export const isIPhone11 = isIOS && (width === 414 && height === 896 && devicePixelRatio === 3) //iphone Xs Max、iphone11、iphone11 Pro Max
export const isIPhone12 = isIOS && (width === 390 && height === 844 && devicePixelRatio === 3)
export const isIPhone12ProMax = isIOS && (width === 428 && height === 926 && devicePixelRatio === 3)
           

由于页面最底部按钮需要针对刘海屏机型的底部做适配，所以需要用到env(safe-area-inset-bottom)

.register-btn{
      margin 0.4rem
      &.bottom{
        margin-bottom calc(.4rem + env(safe-area-inset-bottom)) //针对刘海屏机型适配
      }
    }
           

参考

https://zhuanlan.zhihu.com/p/369515213