本帖最后由 木缘 于 2024-8-16 08:59 编辑
爱星物联APP状态栏适配
随着移动设备的多样化和操作系统版本的更新，确保APP在不同设备和系统版本上都能更好地适配状态栏变得尤为重要。状态栏作为用户界面的重要组成部分，其适配性直接影响到用户体验。本文档详细介绍爱星物联APP状态栏适配技术方案，帮助开发者实现跨平台、跨版本的良好兼容性。
1. 效果预览 爱星物联APP首页在不同尺寸手机下的效果，可以看到自适应后的状态栏效果基本是一致的。
2. 顶部状态栏 爱星物联APP分两步处理状态栏高度：
1）APP原生端（Android、IOS）获取状态栏高度后，会将一个名为statusBarHeight的变量注入到webview中的localStorage
2）H5端通过localStorage.getItem("statusBarHeight")获取到指定高度像素后在需要调整顶部高度的页面设置相关CSS样式即可。
3）设置状态栏背景颜色setStatusBarStyle(type)，背景颜色只能设置黑色或白色
3. IOS底部安全区 在iOS开发中，底部安全区指的是屏幕底部距离底部边缘的一段安全距离。这段区域在iPhone X及以上设备上尤为重要，因为这里通常会有底部横条、底部导航栏等元素。正确处理底部安全区对于确保应用界面的美观性和用户交互的顺畅性至关重要。
爱星物联APP主要通过设置页面底部内边距的方式保证安全区域的兼容性。如下： padding-bottom:constant(safe-area-inset-bottom); padding-bottom:env(safe-area-inset-bottom);
| 
