解决：使用 safe-area-inset-top 等 ios 安全区域变量 + meta 标签中设置 viewport-fit=cover

https://github.com/pengkobe/reading-notes/issues/436

https://stackoverflow.com/questions/46232812/cordova-app-not-displaying-correctly-on-iphone-x-simulator/46232813 (good)

https://imweb.io/topic/5baa38c279ddc80f36592efb （good）

步骤一：更新 cordova-plugin-statusbar 插件（非必须）

步骤二：更新 cordova-plugin-splashscreen（非必须）

步骤三：meta 添加 viewport-fit=cover 如：

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover">

步骤四：利用苹果提供的 CSS 常量如：

padding-top: env(safe-area-inset-top);

我的做法(自测有效)：

增加了 viewport-fit=cover 属性后在app.scss 中加入：

ionic3 IPX留海适配的更多相关文章

  1. iPhoneX快速适配，简单到你想哭。

    研究了5个小时的iPhoneX适配. 从catalog,storyboard,safearea等一系列文章中发现.如果我们想完全撑满全屏.那直接建一个storyboard就好了.但撑满全屏后,流海就是 ...

  2. Cocos Creator iPhoneX适配的解决办法

    研究了5个小时的iPhoneX适配. 从catalog,storyboard,safearea等一系列文章中发现.如果我们想完全撑满全屏.那直接建一个storyboard就好了.但撑满全屏后,流海就是 ...

  3. 使用AVPlayer自定义支持全屏的播放器（五）—Swift重构版本

    前言 很早之前开源了一个简单的视频播放器,由于年久失修,效果惨目忍睹,最近特意花时间对其进行了深度重构.旧版本后期不再维护,新版本使用Swift实现,后续会增加更多功能.不想看文字的请自行下载代码-- ...

  4. 敏感、脆弱,OLED柔性屏会带给制造业怎样的灾难？

    智能手机市场已经有些意兴阑珊,大家创新的点子在过去十年逐一亮剑,也带来了一些革命,现在谈到智能手机硬件,只能是更大的屏幕.更大的电池,更高的摄像头像素等等,长期的创新乏力,已经让消费者失去" ...

  5. 从技术层面讲，如今的iPhone还能吊打其他手机吗?

    自iPhone诞生之日起,他们就走了一条绝对精品主义路线,雍容华贵.价格高昂,十年帝国长盛不衰,其中,固然有乔布斯的粉丝文化和库克高超供应链管理的作用,但究其根本,还要回归到iPhone领先竞争对手一 ...

  6. 新iPhone的高售价下，苹果供应商们是该笑还是该哭？

    自新 iPhone发布之日起,世界就从未停止讨论其售价,越来越多的人开始困惑:新 iPhone毫无创新亮点,有什么底气卖到12799RMB呢?整个地球都在期待苹果推出廉价版 iPhone,望眼欲穿地等 ...

  7. TOF与结构光技术分析

    TOF与结构光技术分析 一．概述 结构光(Structuredlight),通常采用特定波长的不可见的激光作为光源,它发射出来的光带有编码信息,投射在物体上,通过一定算法来计算返回的编码图案的畸变来得 ...

  8. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  9. [转]在cocos2d-x中让一个项目适配iphone、iphone retina、ipad、ipad retina四种分辨率

    http://cankeyyin.blog.163.com/blog/static/12336178320124149391202/ 原理:将iphone的hd图片给ipad用,即: 使用原iphon ...

随机推荐

  1. S3C6410的启动代码分析&nbsp;一

    本文开始第一篇,启动代码的编写,注意,仅仅是启动代码,并不是bootloader,因为只有boot,没有loader. 第一要明确:CPU上电之后,会从某个固定地址执行指令.ARM结构的CPU从地址0 ...

  2. php格式化时间戳显示友好的时间

    在项目中时间一律显示为2014-10-20 10:22显得很呆板.在微博.QQ空间等网站通常会显示为几秒前,几分钟前,几小时前等容易阅读的时间,我们称之为友好的时间格式.那么用php怎么实现呢? 大体 ...

  3. Ubuntu下libpcap安装步骤

    第一步,先安装GCC ,一般都会自动安装 sudo apt-get install build-essential 第二步,GNU M4可以从此处ftp.gnu.org/gnu/m4/ 下载 sudo ...

  4. c语言学习笔记-if语句块一定要加分号

    if(a>6) printf("hello");//语句1 printf("world");//语句2 当a>6的时候,执行的分支语句是语句1,而不 ...

  5. GO程序设计2——面向过程基础知识

    1 简介 GO语言google开发的新语言.有如下特性: 自动垃圾回收.更丰富的内置数据类型.函数多返回值.错误处理.匿名函数和闭包.类型和接口.并发编程.反射.多语言混合编程 package mai ...

  6. 在IE11(Win8)中检查up6.2配置

      1.按F12,打开调试模式    2.打开调试程序选项卡 说明:在调试程序选项卡中可看到IE加载的脚本信息是否正确.因为IE有缓存,导致脚本有时不是最新的.    3.打开脚本,up6.js   ...

  7. C++ 虚基类 派生与继承

    在学习设计模式时我就有一个疑问,关联和继承除了用法上的区别,好像在内存上并没有什么区别,继承也是父类作为了子类的元素(内存上),关联也是这样.而且关联好像更占内存一些.这就是设计模式里问题了“依赖倒转 ...

  8. redis系列：基于redis的分布式锁

    一.介绍 这篇博文讲介绍如何一步步构建一个基于Redis的分布式锁.会从最原始的版本开始,然后根据问题进行调整,最后完成一个较为合理的分布式锁. 本篇文章会将分布式锁的实现分为两部分,一个是单机环境, ...

  9. 门面（Facade）模式

    门面(Facade)模式  也叫 外观模式. 外观模式:为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得子系统更加容易使用 /* * 门面(Facade)角色:客户端可以 ...

  10. SQL cast 函数

    (1).CAST()函数的参数是一个表达式,它包括用AS关键字分隔的源值和目标数据类型.以下例子用于将文本字符串'12'转换为整型: SELECT CAST('12' AS int) (2).返回值是 ...