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. spring boot admin项目的集成和开发

    Spring Boot Admin是一个Github上的一个开源项目,它在Spring Boot Actuator的基础上提供简洁的可视化WEB UI,是用来管理 Spring Boot 应用程序的一 ...

  2. 阿里巴巴--mysql中Mysql模糊查询like效率，以及更高效的写法

    在使用msyql进行模糊查询的时候,很自然的会用到like语句,通常情况下,在数据量小的时候,不容易看出查询的效率,但在数据量达到百万级,千万级的时候,查询的效率就很容易显现出来.这个时候查询的效率就 ...

  3. .NET Core请求控制器Action方法正确匹配，但为何404？

    前言 有些时候我们会发现方法名称都正确匹配,但就是找不到对应请求接口,所以本文我们来深入了解下何时会出现接口请求404的情况. 匹配控制器Action方法(404) 首先我们创建一个web api应用 ...

  4. JAVA环境配置（WIN10之64位）

    1.下载java开发工具包JDK,https://www.oracle.com/technetwork/java/javase/downloads/index.html进入首页, 点击下载页: 点击下 ...

  5. Flask03-Form

    ## Web 表单 配置 为了能够处理 web 表单,我们将使用 Flask-WTF ,该扩展封装了 WTForms 并且恰当地集成进 Flask 中. 许多 Flask 扩展需要大量的配置,因此我们 ...

  6. 关于JavaScript函数

    object.defineProperty()函数 再学习这个函数之前,我们先创建一个object对象 var person = {} person.name = "junlebao&quo ...

  7. day19__生成器，迭代器

    一.列表解析 l1 = ['鸡蛋%s' % i for i in range(10) if i > 5] print(l1) # ['鸡蛋6', '鸡蛋7', '鸡蛋8', '鸡蛋9'] 这种方 ...

  8. mackdown基础语法

    目录 前言 二.Markdown基本语法 前言 由于有些语法无法在博客园展示,推荐使用Typora解锁全套,下载地址:https://www.typora.io/ Markdown是一种可以使用普通文 ...

  9. Centos7-Docker1.12开启守护进程（远程调用）

    本文讲述了Docker1.12.6在Linux下开启守护进程(远程调用),理论上来说其他版本也是一样的改法,博主参考很多都是巨坑,综合自己实战分享给大家,如有错误请留言; - 修改配置 1.修改 do ...

  10. 2020年全新web前端学习路线图，学完就业20K！

    第一阶段:HTML5+css 配套学习视频: 前端小白零基础入门HTML5+CSS3 第二阶段:移动web网页开发 移动web进阶教程 第三阶段:JavaScript网页编程 前端与移动开发基础入门到 ...