iphone x适配记录

1. 遇到的问题，iphonex适配问题，在wx和i4上表现不一样

   1. 研究的文件是testMian/iphone适配和iphone适配-bs

2. 名词简写

   1. “i4底”指代 i4自己兼容iphonex自动出现的底部栏，明显的灰色
   2. ”env“指代 constant(safe-area-inset-bottom)与env(safe-area-inset-bottom)

3. 研究方向

   1. 获取不同情况下屏幕分辨率的高度，可见区域高度，文档高度（最好能做成表、图）

   2. iphone x与iphone xr的各种尺寸，上面那些高度是如何来的（放忘记一眼能记起的图）

   3. body设置100%与100vh所影响的是文档高度，如果文档高度小于可见区域的话i4底，这里需再次验证，高度不够时在i4和wx上的表现

   4. 将body由原来的100%设置为100vh，能处理大部分问题，但是body的高度就固定了，添加的padding-bottom也没用了，那些原生滚动的区域就要单独去加上env，如商品详情；设置为auto，就会导致很多地方没有高度，如我要赚页面

   5. 此处还需注意box-sizing:border-box,对body自身高度的影响，一开始以为根据此高度来判断时候出现i4底，后发现应该是根据文档高度判断的；此处需验证，文档高度小于可见区域高度出现i4底，以及其反面

   6. i4上iphonexr的高度还是812，应该是按照x的尺寸放大的；

   7. vh的知识点，是可见区域高度的1%，

      1. CSS內使用vh单位的时候注意100vh包含导航栏，使用时需要减去导航栏和tabBar高度，部分浏览器还包含浏览器操作栏高度，使用时请注意。

4. 预期

   1. 希望能统一适配i4、wx等浏览器
   2. 这次只处理了几个页面，其他页面没看；所有项目都要处理iphonex的适配问题，如何做到方便统一清晰，以及不能对页面基础影响太大
   3. 页面不同布局，如原生滚动，模拟滚动，统一的适配
   4. 最好是能生成一个文件，或是规范，

5. 参考资料

   1. Js/Jquery获取网页屏幕可见区域高度

window.screen.height ==> 屏幕分辨率的高
 document.body.clientHeight ==> 网页可见区域高
 window.screen.availHeight ==> 屏幕可用工作区高度
 jq的
 $(window).height() 　              //浏览器时下窗口可视区域高度   
$(document).height()　           //浏览器时下窗口文档的高度   
$(document.body).height()　　　　　　//浏览器时下窗口文档body的高度   
$(document.body).outerHeight(true)　//浏览器时下窗口文档body的总高度 包括border padding margin   

2. 网页适配 iPhoneX，就是这么简单
3. iOS iPhone各机型尺寸及导航栏高度

ios iphone各机型尺寸及导航栏高度.png

5. IOS设计尺寸规范

   1. 这个没有xr

6. 结果

   1. 把简历和淘多多项目中的写法拿过来

7. 淘多多的代码

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {

    body {
        /* body默认高度100%，iphonex上会让i4加上底部，
        故将其高度设置为100vh，但其100vh一般大于100%，可能对布局有影响，需注意 
        加了固定高度，padding就没作用了
        */
        position: relative;
        height: 100vh;
    }

    uni-tabbar {
        padding-bottom: constant(safe-area-inset-bottom) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
    }

    .payFooter {
        height: calc(98upx + constant(safe-area-inset-bottom)) !important;
        height: calc(98upx + env(safe-area-inset-bottom)) !important;
        padding-bottom: constant(safe-area-inset-bottom) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
}

8. 简历的代码

// 兼容iphonex开始
  @supports (bottom: constant(safe-area-inset-bottom)) or
    (bottom: env(safe-area-inset-bottom)) {
    .chooseJob .footer,
    .footer-el {
      bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
      bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
    }

    .ghostWriteResume .scroll .resumeBottom,//border是因为这个没有设置高度
    .orderDetail .footer {
      border-bottom: 0 solid #fff;
      border-bottom-width: constant(safe-area-inset-bottom);
      border-bottom-width: env(safe-area-inset-bottom);
    }
    .orderDetail .footer {
      box-sizing: content-box;
    }
    .scroll-con > div,
    .scroll > div,
    .chooseJob .jobListBox {
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

  // 兼容iphonex结束