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. android 6.0 权限设置详解

    从Android 6.0版本开始,在安装应用时,该应用无法取得任何权限. 相反,在使用应用的过程中,若某个功能需要获取某个权限,系统会弹出一个对话框,显式地由用户决定是否将该权限赋予应用. 只有得到了 ...

  2. robot framework使用小结（四）

    robot framework可以采用读excel表这种形式实现数据分离,本文没有实现批量读取excel表内容(还不会),后续有必要就学习哈再更新~~~ 新建测试案例baidu05, 右键项目名rob ...

  3. 2020年的六种编程语言排名中，java排第几只有不到1％的人知道

    前言 编程语言是开发的基础.有不同的类型和特征,并且开发人员针对不同的场景选择正确的语言,但是您知道使用哪种语言吗?中国和世界各地有多少开发人员正在使用它?他们的排名是多少?快来看看您知道多少个列表! ...

  4. 用户不在sudoers文件中怎么办，ziheng is not in the sudoers file解决方法

    sudo是linux系统中,用来执行需要权限命令,但是一些朋友使用sudo时,出现下面的错误“ziheng is not in the sudoers file. This incident will ...

  5. 1年转行资深前端工程师，开源项目过 1k stars，完整学习过程

    先介绍下大致情况时间线. 18 年 8 月正式转方向为前端,之前做了一段时间的 iOS,后来因为对前端更感兴趣所以就打算转方向了.19 年 10 月入职当前公司,定级资深前端,分配到业务架构小组,自此 ...

  6. js 字符串排序

    this.regionsList = result.sort((a, b) => a.warehouseAreaCode.localeCompare(b.warehouseAreaCode)); ...

  7. C++版的网络数据包解析策略(升级版)

    初版:http://www.cnblogs.com/wjshan0808/p/6580638.html 说明:在实现了对应的接口后该策略可以适合绝大多数的网络数据包结构 首先,是三个接口 IProdu ...

  8. mmdetection源码剖析(1)--NMS

    mmdetection源码剖析(1)--NMS 熟悉目标检测的应该都清楚NMS是什么算法,但是如果我们要与C++和cuda结合直接写成Pytorch的操作你们清楚怎么写吗?最近在看mmdetectio ...

  9. 传参问题-HttpMessageNotReableException

    很久没写后台代码,用postMan测试后台接口的时候出现了一个问题: 问题如下: 显而易见是参数问题,我的参数如下图: 我调整参数样式为: 但还是存在问题. 最后调整成用双引号,结果对了.之前没有注意 ...

  10. C# 跨平台UI 技术

    构建跨平台应用程序的的几种UI技术,以C# 或者其他基于.NET的 语言(诸如:Visual Basic[VB]).本文研究了三种跨平台技术,并讨论了在哪些情况下开发人员可以使用这些技术.本文使你对可 ...