解决:使用 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. apk安装包信息

    String archiveFilePath="sdcard/DangDang.apk";//安装包路径          PackageManager pm = getPacka ...

  2. ParallaxEffect

    [ParallaxEffect] ParallaxEffect是一种用简单的2D贴图来模拟3D效果的简易方法.譬如一棵树,摄像机俯视时,当树远离摄像机时,树顶偏远,当树靠近,树顶偏近.苹果官方Adve ...

  3. 【原创】3. MYSQL++ Query类型与SQL语句执行过程(非template与SSQLS版本)

    我们可以通过使用mysqlpp:: Query来进行SQL语句的增删改查. 首先来看一下mysqlpp::Query的一些最简单的调用, conn.connect(mysqlpp::examples: ...

  4. 在tomcat6.5+上配置虚拟主机

    一 准备(必须配置,否则不能解析域名到ip) 我们将配置两台虚拟主机,假设域名分别为 www.test1.com www.test2.com 为了测试方便,请在客户机的: Win2K://WINNT/ ...

  5. web优化

    一个小型的网站,可以使用最简单的html静态页面就实现了,配合一些图片达到美化效果,所有的页面均存放在一个目录下,这样的网站对系统架构.性能的要求都很简单.随着互联网业务的不断丰富,网站相关的技术经过 ...

  6. 详解servlet的url-pattern匹配规则.RP

    首先需要明确几容易混淆的规则: servlet容器中的匹配规则既不是简单的通配,也不是正则表达式,而是特定的规则.所以不要用通配符或者正则表达式的匹配规则来看待servlet的url-pattern. ...

  7. 列表推导式对比For循环执行效率

    我们在前面的学习中都知道,如果把1-10以内的元素追加到一个新的列表表中,如果使用for循环我们可以这么做: a = [] for i in range(1,11): a.append(i) prin ...

  8. LightOJ 1248 Dice (III) (水题,期望DP)

    题意:给出一个n面的色子,问看到每个面的投掷次数期望是多少. 析:这个题很水啊,就是他解释样例解释的太...我鄙视他,,,,, dp[i] 表示 已经看到 i 面的期望是多少,然后两种选择一种是看到新 ...

  9. easyui-dialog 弹窗

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  10. 编译boost,去掉不使用的组件

    说明:下面内容仅针对Linux环境(boost官网为:http://www.boost.org/,可从这里下载它的源代码包,这里要求下载.tar.gz包,而非.7z..zip或bz2包). 在当前目录 ...