方案一：纯色背景的情况下，解决方案就是background-color在您的body代码上设置属性；

方案二：视口入，viewport-fit=cover:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

方案三：前提，在用了方案二的时候，最好在用此方案，就完善了，安全区，inset_*

  • safe-area-inset-top
  • safe-area-inset-right
  • safe-area-inset-left
  • safe-area-inset-botto

这可以被添加到margin，padding或绝对位置值这样一个top或left。

padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

文档地址：

http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/

iPhone X 上删除白条的更多相关文章

  1. 通过Mac远程调试iPhone/iPad上的网页(转)

    我们知道在 Mac/PC 上的浏览器都有 Web 检查器这类的工具(如最著名的 Firebug)对前端开发进行调试,而在 iPhone/iPad 由于限于屏幕的大小和触摸屏的使用习惯,直接对网页调试非 ...

  2. Iphone H5上传照片被旋转

    最近做项目发现在Iphone下,我们上传图片都会被翻转,最后查阅资料发现,的确是IOS的问题 不说过程,直接解决方法 iOS下,html方式使用<input type="file&qu ...

  3. iPhone 屏幕上的 Home 键在哪里？（已解决）

    「问」:iPhone屏幕上的Home键如何开启? 「答」:在[设置]-[通用]-[辅助功能]-[AssistiveTouch],打开即可.不需要下载什么App. [Settings] - [Gener ...

  4. 解决iphone safari上的圆角问题

    -webkit-appearance : none ; /*解决iphone safari上的圆角问题*/

  5. 怎样配置git ssh连接,怎样在GitHub上加入协作开发人员,怎样配置gitignore和怎样在GitHub上删除资源库.

    **********1.在运行git push origin master指令时报例如以下错误: iluckysi@ILUCKYSI-PC /d/ilucky/message/code (master ...

  6. 苹果iPhone X上搭载的那颗A11仿生芯片，到底牛在哪？

    苹果iPhone X上搭载的那颗A11仿生芯片,到底牛在哪? 上周,苹果公司在刚刚落成投入使用的“飞船”新总部(Apple Park)举行2017年秋季新品发布会,整场发布会基本被iPhone X抢尽 ...

  7. Linux上删除大量文件几种方式对比

    目录 Linux上删除大量文件几种方式对比 1. rm删除:因为文件数量太多,rm无法删除(报错) 2. find查找删除:-exec 3. find查找删除:xargs 4. find调用-dele ...

  8. 在iPhone手机上写了input type="date" 显示不出来的原因

    在iPhone手机上写了input type="date" 显示不出来的原因 今天在手机页面上使用新的input类型,这样子写,在chrome浏览器上浏览,很好,显示出来.然后用i ...

  9. 根据某条件给GridView符合条件的值画上删除线

    如博文标题,根据某些条件对GridView控件中,对符合条件的值画上删除线效果.实现这些要求,只人捕获到哪些符合要求的数据即可.GridView控件是在TemplateField模版显示数据,Insu ...

随机推荐

  1. Spring简单集成Redis

  2. 关于最近WIN7系统错误711的解决办法

    昨天晚上有发现部分用户反馈错误711,因为不在现场不清楚是怎么一回事,今天早上又有其他客户反馈他下面有4个用户发生711错误. 刚好在电脑边上,就拨号试下,结果我的也是711 这个711的症状是: 单 ...

  3. 小程序笔记三：幻灯片swiper 和图片自定义高度

    滑动组件:scroll-view wxml代码 <view> <scroll-view scroll-x="true" class="tab-h&quo ...

  4. js实现图片粘贴上传到服务器并展示

    最近看了一些有关于js实现图片粘贴上传的demo,实现如下: (这里只能检测到截图粘贴和图片右键复制之后粘贴) demo1: document.addEventListener('paste', fu ...

  5. 2 BeeGo 参数配置与路由配置

    beeGo 的参数配置 beeGo默认会解析当前应用下的conf/app.conf文件 默认的配置如下: appname = WEB httpport = 8080 runmode = dev run ...

  6. 7 Django系列之关于bootstrap-table插件的简单使用

    preface 我们在前端html页面的时候做表格最常用的就是jinja2渲染,这样的好处是无须引用外部插件,直接使用就行,方便.但是不好的就是前端CSS样式以及其他表格排序筛选功能需要自己写,增加了 ...

  7. Android 混淆代码有关问题总结

    Android 混淆代码问题总结 Android 混淆代码: 最快的方式: 1. 首先更新Android的SDK至最新版本,重新建立1个工程,把源码和资源及其他文件拷到新的工程里面. 2. 工程目录底 ...

  8. CentOS 7中添加一个新用户并授权

    Linux 创建web用户组及用户: groupadd www-data useradd -g www-data www-data 笔记本安装了一个CentOS,想要让别人也可以登录访问,用自己的账号 ...

  9. 使用a标签制作tooltips

    摘要: 前面已经分享了三种方法制作tooltips,今天再来分享一个借助a标签来实现tooltips的方法. 效果如下:

  10. Hibernate的Configuration和SessionFactiory

    Configuration: Configuration是hibernate的入口,负责管理Hibernate的配置信息,这些配置信息都是从配置文件hibernate.cfg.xml或者Hiberna ...