Cordova iPhone 刘海屏 和 安卓瀑布屏 等异形屏幕的适配处理

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); 
    }
}

 

posted @ 2020-07-22 16:39  前端大兵  阅读(1818)  评论(0)  编辑  收藏  举报