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. Java集合框架（不全，待继续整理）

    技术在线学习网站: https://www.runoob.com/java/java-collections.html 从上面的集合框架图可以看到: 1.Java 集合框架主要包括两种类型的容器: 1 ...

  2. django 报错处理汇总

    运行 manage.py task时 ,makemigrations抛出以下错误, django.db.utils.OperationalError: (1045, "Access deni ...

  3. laravel --- composer install之后，项目没有vender目录

    composer install之后,项目没有vender目录 1. 原因一:PHP版本过低 PHP版本需要7.1以上,目前使用的是7.0.23

  4. Springboot 集成 ElasticSearch 踩坑

    这里只涉及到基础使用 导包 <dependency> <groupId>org.springframework.boot</groupId> <artifac ...

  5. Java | 顶层类（Top-Level Class）

    前言 本文内容根据 Java 官方教程中的<课程:类和对象>编写而成. 本文提供的是 JDK 14 的示例代码. 定义 顶层类(Top-Level Class),是 Java 中对类的一种 ...

  6. 入门大数据---PySpark

    一.前言 前面我们学习的是使用Scala和Java开发Spark.最近补充了下Python基础,那么就用Python开发下Spark.Python开发Spark简称PySpark. 二.环境准备 1. ...

  7. ShellExecute指定IE浏览器打开网页

    ShellExecute(NULL,L"open", L"iexplore.exe", L"www.baidu.com", NULL, SW ...

  8. 【弹性碰撞问题】POJ 1852 Ants

    Description An army of ants walk on a horizontal pole of length l cm, each with a constant speed of ...

  9. 使用scrapy实现去重，使用Redis实现增量爬取

    面试场景: 要求对正在爬取的内容与mysql数据库中的数据进行比较去重 解决方式: 通过Redis来作为中间件,通过url来确保爬过的数据不会再爬,做到增量爬取. Redis数据库其实就是一个中间件, ...

  10. 使用phpQuery进行采集数据，模拟curl提升访问速度

    使用php采集网页数据一般有多种方法,有时候会使用正则去采集页面,但是当我们需要采集的页面大并且多的话,会严重的浪费我们的cpu,这时候我们可以使用phpQuer来进行采集,不知道phpQuery的童 ...