Cordova iPhone 刘海屏 和 安卓瀑布屏 等异形屏幕的适配处理
2024-10-19 23:26:51
1. 在cordova项目的config.xml中指定StatusBarOverlaysWebView(需要cordova-plugin-statusbar插件支持),表示应用界面是否覆盖状态栏(系统最上方显示时间、信号、电量的地方)。Android设为false,iOS设为true。设为true可以达到沉浸式的效果。
<platform name="android">
<preference name="orientation" value="portrait" />
<preference name="StatusBarOverlaysWebView" value="false" />
</platform> <platform name="ios">
<preference name="orientation" value="portrait" />
<preference name="StatusBarOverlaysWebView" value="true" />
</platform>
2. 在html的头部标签里指定viewport的 viewport-fit=cover,让页面空间撑满显示屏。
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
...
</head>
3. 设置页面容器的padding为safe-area相关值。safe-area是iphone自带的css环境变量,标记各边的安全边距,参考 MDN文档 。
.container{
padding: env(safe-area-inset-top, 50px)
env(safe-area-inset-right, 0px)
env(safe-area-inset-bottom, 0px)
env(safe-area-inset-left, 50px);
}
这是比较粗暴的做法。实际的app内头部通常有个navbar,底部有个toolbar。可以这样设置他们的高度:
.navbar{
height:calc(env(safe-area-inset-top) + 44px);
padding-top: env(safe-area-inset-top);
} .toolbar{
height:calc(env(safe-area-inset-bottom) + 44px);
padding-bottom: env(safe-area-inset-bottom);
}
4. 对于Android,如果设置 StatusBarOverlaysWebView 为true,建议使用css自定义变量来控制头部的内边距。
:root{
--safe-area-top: 44px;
--safe-area-bottom: 0px;
--safe-area-right: 0px;
--safe-area-left: 0px;
} body{
padding-left: var(--safe-area-left);
padding-right: var(--safe-area-right);
} .navbar{
height:calc(var(--safe-area-top) + 44px);
padding-top: var(--safe-area-top);
}
进一步的思路:根据机型指定特定的边距;对于曲面屏、瀑布屏,还可以设置两侧的safe-area来优化显示效果。
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
if(device.model && device.model=="LIO-AL00"){
//如果是华为Mate30pro,则插入自定义safe-area,左右两侧空出一定距离
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML=":root{ --safe-area-left:24px;--safe-area-right:24px }";
document.getElementsByTagName('head').item(0).appendChild(style);
}
}
最新文章
- express 的 app.get和app.use
- Java多线程编程核心技术---线程间通信(二)
- db.properties 数据库配置文件
- TCP协议的一些问题
- Android项目源码界面超级华丽的仿QQ最新版本
- css笔记——inline-block以及空白字符处理
- java创建对象的几种常用方法
- 自学php的几个例子(包含AMP(Apache、MySQL、PHP)环境搭建链接)
- Java:配置环境(Mac)——MySQL
- css控制table间距
- iOS 开发 nonatomic 和 atomic
- FineUIMvc 常见问题及解决办法
- Spock - Document -04- Interaction Based Testing
- 加载所有jar包下指定文件
- 使用openpyxl复制整张sheet
- WPF 中 TextBlock 文本换行与行间距
- android 解决studio生成aar包并在其他工程引用aar包的坑,不需要任何gradle配置
- 如何利用API导出带有页眉页脚的excel
- DataGridView使用技巧四:删除行操作
- C语言 从头学起了