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. springboot集成jpa操作mybatis数据库

    数据库如下 CREATE TABLE `jpa`.`Untitled` ( `cust_id` bigint() NOT NULL AUTO_INCREMENT, `cust_address` var ...

  2. base64格式的图片上传阿里云

    base64格式的图片上传阿里云 上传图片的时候,除了普通的图片上传,还有一张图片信息是以base64格式发送到后台的. 后台接受base64格式的图片,上传至阿里云代码:(主要是将base64转化成 ...

  3. Halcon斑点分析官方示例讲解

    官方示例中有许多很好的例子可以帮助大家理解和学习Halcon,下面举几个经典的斑点分析例子讲解一下 Crystals 图中显示了在高层大气中采集到的晶体样本的图像.任务是分析对象以确定特定形状的频率. ...

  4. Oracle的number数据类型

    https://www.cnblogs.com/oumyye/p/4448656.html NUMBER ( precision, scale) precision表示数字中的有效位;如果没有指定pr ...

  5. Erlang模块inet翻译

    模块 inet 模块概述 访问TCP / IP协议. 描述 此模块提供对TCP/IP协议的访问. 另请参阅<ERTS用户指南:Inet配置>,以获取有关如何配置用于IP通信的Erlang运 ...

  6. .net core Web API参数绑定规则

    参数推理绑定 先从一个问题说起,微信小程序按照WebAPI定义的参数传递,Get请求服务器端可以正常接收到参数,但是Post请求取不到. Web API代码(.netcore 3.1)如下: [Htt ...

  7. 使用 Docker 开发 - 使用多阶段构建镜像

    多阶段构建是一个新特性,需要 Docker 17.05 或更高版本的守护进程和客户端.对于那些努力优化 Dockerfiles 并使其易于阅读和维护的人来说,多阶段构建非常有用. 在多阶段构建之前 构 ...

  8. 每日一题 - 剑指 Offer 54. 二叉搜索树的第k大节点

    题目信息 时间: 2019-07-04 题目链接:Leetcode tag:二叉搜索树 中序遍历 递归 难易程度:中等 题目描述: 给定一棵二叉搜索树,请找出其中第k大的节点. 示例1: 输入: ro ...

  9. Howdoo欢迎Mitel成为内容发布支持者

    原文链接:https://medium.com/howdoo/howdoo-welcomes-mitel-as-a-launch-supporter-4c40027d4dd1 “Mitel很高兴能够成 ...

  10. Python 的print报错SyntaxError: invalid syntax

    1. #!/usr/bin/python print "hello world!" print报错:SyntaxError: Missing parentheses in call ...