前言
跨端调试时间成本大，这个适配问题当时反反复复修改了很多次，目前能兼容多种型号的手机，屏幕主要针对：刘海屏、挖孔屏、全面屏和正常的屏幕，包括手机浏览器的正常展示。希望能对做跨端的同学有帮助。
公司跨端框架是集团研发的mtl，目前框架还在研发测试阶段，不是很稳定，但是基本功能已经可以实现（如果有没适配到的，那就是我们没有测试机）
前提
我们在跨端框架的配置文件project.json文件配置属性isScreenEdge:true即页面内容从屏幕顶端开始（如果是从状态栏一以下开始就没有这个必要了）:
iphone xs刘海屏展示
应用场景：
- 钉钉第三方应用
- 浏览器
- ios和安卓手机
实现效果
ios和安卓终端需要添加状态栏填充
浏览器显示不需要添加状态栏填充
钉钉内部显示不需要添加状态栏填充
解决方案
思路：首先我们需要判断平台，根据平台判断我们是否需要添加顶部导航的填充，然后在对应的页面样式上使用计算属性添加padding变量，这里我们就以scss为例。
- 创建scss样式文件，定义初始header变量为0，页面高度为100vh
- image.png
- 判断是否是终端，是的话添加25的填充（阅读其他文章的时候有作者说ios的刘海屏要设置为40，我觉得太高了，所以我们统一使用了25）
- image.png
3.通过 sass-resources-loader 全局注册 Sass/Less 变量，在vue.config.js文件里配置webpack，如下：
image.png
-
变量在页面上的使用（注意变量的书写方式#和$）
image.png
