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

    }

}

Cordova iPhone 刘海屏 和 安卓瀑布屏 等异形屏幕的适配处理的更多相关文章

  1. 安卓投屏助手(B1358)之辅助调试

    Android远程桌面助手的中文版——安卓投屏助手正式上线.安卓投屏和远程控制的软件其实已经非常多了,如Vysor.Total Control.Mobizen.ApowerMirror.TeamVie ...

  2. 安卓投屏助手(ARDC)最新版

    安卓投屏助手(B1493) 1.兼容Android 10: 2.增加灭屏投屏功能: 3.增加显示鼠标位置功能; 4.增加了虚拟NaviBar功能: 5.捐赠界面增加QQ支付,移除Paypal,感谢大家 ...

  3. 开源免费的安卓投屏工具-Scrcpy

    最近需要使用安卓投屏在桌面上操作,一开始使用Vysor,免费版画质无法直视,发现一个开源的工具,Scrcpy,貌似效果不错,但没有GUI,命令行安装,整起(Mac) 1.安装 homebrew: 通过 ...

  4. OpenStack中VNC协议实现多屏共享（多屏不踢访问）

    OpenStack中VNC协议实现多屏共享 by 无若   libvirt设置基本说明:   <devices> <graphics type='sdl' display=':0.0 ...

  5. 与众不同 windows phone (47) - 8.0 其它: 锁屏信息和锁屏背景, 电池状态, 多分辨率, 商店, 内置协议, 快速恢复

    [源码下载] 与众不同 windows phone (47) - 8.0 其它: 锁屏信息和锁屏背景, 电池状态, 多分辨率, 商店, 内置协议, 快速恢复 作者:webabcd 介绍与众不同 win ...

  6. delphi 程序全屏显示无标题栏，覆盖整个屏幕

    delphi 程序全屏显示无标题栏,覆盖整个屏幕,这个在做工控机或屏保时有用的,所以记下 procedure TMainFrm.FormCreate(Sender: TObject); begin w ...

  7. android开发 锁屏 真正的锁屏，是go锁屏那种。

    想做个锁屏界面很久了,最近一周,历经千辛万苦,越过种种挫折,终于完美实现了这一要求,在此将锁屏思路分享出来. 注意:这不是什么一键锁屏,是类似“go锁屏”那样的锁屏界面. 准备:本程序共需要 两个ac ...

  8. Android滚动截屏，ScrollView截屏

    在做分享功能的时候,需要截取全屏内容,一屏展示不完的内容,一般我们会用到 ListView 或 ScrollView 一: 普通截屏的实现 获取当前Window 的 DrawingCache 的方式, ...

  9. android全屏和取消全屏 旋转屏幕

    全屏 getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN); 取消全屏 getWindow().clearFlags(Win ...

随机推荐

  1. typora中的图片处理20200622

    typora中的图片处理20200622 食用建议 typora作为markdown的书写神器,一般习惯的流程是在typora中写完,然后复制粘贴到博客园中,然而,markdown中图片采用的是本地连 ...

  2. egret canvas的style

    <canvas width="1920" height="1080" style=" cursor:auto;//鼠标样式 positon:ob ...

  3. 超简单集成HMS Scan Kit扫码SDK,轻松实现扫码购

    前言   在前面的文章中,我们向大家介绍了HMS Scan Kit 的快速集成方法以及HMS Scan Kit和其他开源扫码工具的竞争力对比分析,如果没有看到也没关系,文章下方的往期链接中有文章入口. ...

  4. Fiddler和JMeter测试需要主要的地方

    Fiddler里面设置请求头的时候ContentType和Content-Type这两种写法都可以: 这两种写法都可以. 但是在JMeter中必须要用Content-Type才行,如下图所示: (完)

  5. "Celsius=5/9*(Fahrenheit-32)" and "Celsius=5*(Fahrenheit-32)/9 "

    The reason for multiplying by 5 and dividing by 9 instead of just multiplying by 5/9 is that in C, a ...

  6. 从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)

    在浏览器地址栏输入URL 浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤 如果资源未缓存,发起新请求 如果已缓存,检验是否足够新鲜,足够新鲜直接提供给客户端,否则与服务器进行验证. 检验 ...

  7. windows jenkins下配置sonar-scanner

    windows jenkins下配置sonar-scanner 一.基本配置信息 ① jenkins版本:2.222.4 ② sonarqube scanner版本:4.4.0.2170 ③ 操作系统 ...

  8. Spring Boot读取配置文件的几种方式

    Spring Boot获取文件总的来说有三种方式,分别是@Value注解,@ConfigurationProperties注解和Environment接口.这三种注解可以配合着@PropertySou ...

  9. 从零开始学Electron笔记（二）

    在之前的文章我们简单介绍了一下Electron可以用WEB语言开发桌面级应用,接下来我们继续说一下Electron的菜单创建和事件绑定. 我们接上一章的代码继续编写,上一章代码 https://www ...

  10. MISC学习记录 (一)

    A记录 题目 他在看什么视频,好像很好看,不知道是什么网站的. 还好我截取了他的数据包,找呀找. key就是网站名称.格式ctf{key} tip:A记录的第一条. 解题链接 过程 下载解题链接中的文 ...