跨端开发屏幕适配那些事儿

前言

跨端调试时间成本大，这个适配问题当时反反复复修改了很多次，目前能兼容多种型号的手机，屏幕主要针对：刘海屏、挖孔屏、全面屏和正常的屏幕，包括手机浏览器的正常展示。希望能对做跨端的同学有帮助。
公司跨端框架是集团研发的mtl，目前框架还在研发测试阶段，不是很稳定，但是基本功能已经可以实现（如果有没适配到的，那就是我们没有测试机）

前提

我们在跨端框架的配置文件project.json文件配置属性isScreenEdge:true即页面内容从屏幕顶端开始（如果是从状态栏一以下开始就没有这个必要了）:

iphone xs刘海屏展示

应用场景：

• 钉钉第三方应用
• 浏览器
• ios和安卓手机

实现效果

ios和安卓终端需要添加状态栏填充
浏览器显示不需要添加状态栏填充
钉钉内部显示不需要添加状态栏填充

解决方案

思路：首先我们需要判断平台，根据平台判断我们是否需要添加顶部导航的填充，然后在对应的页面样式上使用计算属性添加padding变量，这里我们就以scss为例。

1. 创建scss样式文件，定义初始header变量为0，页面高度为100vh

• image.png

2. 判断是否是终端，是的话添加25的填充（阅读其他文章的时候有作者说ios的刘海屏要设置为40，我觉得太高了，所以我们统一使用了25）

• image.png

3.通过 sass-resources-loader 全局注册 Sass/Less 变量，在vue.config.js文件里配置webpack，如下：

image.png

4. 变量在页面上的使用（注意变量的书写方式#和$）

   
   image.png