如何适配处理iphoneX底部的横条 - ios
iphoneX手机取消了实体Home键,取而代之的是主界面底部不显眼的横条“Home Indicator”。当网页底部fixed 元素时候,一部分元素可能就被这个横条遮挡住,怎么适配解决呢?
第一步:
<meta name=“viewport” content=“width=device-width, viewport-fit=cover”>
第二步:
页面主体内容限定在安全区域内,如果不设置这个值,可能存在小黑条遮挡页面最底部内容的情况
body { padding-bottom: env(safe-area-inset-bottom); }
第三步:
fixed 元素的适配
第一种:padding-bottom: env(safe-area-inset-bottom);
注意元素是否设置box-sizing:border-box;否则不起作用,道理就不说了。
第二种:height: calc(60px(假设值) + env(safe-area-inset-bottom));
第三种:margin-bottom: env(safe-area-inset-bottom);
这三种方式都可解决,视情况而定选择合适的,也可以灵活为fixed 元素的子元素添加这些属性
使用 @supports
一般只希望 iPhoneX 才需要新增适配样式,可以配合 @supports 编写样式:
@supports (bottom: env(safe-area-inset-bottom)) {
div {
margin-bottom: env(safe-area-inset-bottom);
}
}
下面是一些拓展知识点:
1.iphoneX业界刘海屏幕第一款机型,导致全屏不能正常的全屏显示了,所以需要对iphonx 适配
<meta name="viewport" content="viewport-fit=contain">
<meta name="viewport" content="viewport-fit=cover">
<meta name="viewport" content="viewport-fit=auto">
viewport-fit:
contain: 可视化窗口完全包含网页内容
cover: 网页内容完全覆盖
auto: 默认值和 contain 一样
2.ios11 增加新特性,webkit 的 css 函数
四个预定义变量为设定安全区域和边界的距离,如下:
safe-area-inset-left:安全区域距离左边边界距离
safe-area-inset-right:安全区域距离右边边界距离
safe-area-inset-top:安全区域距离顶部边界距离;在刘海全屏的时候 top 为 44px
safe-area-inset-bottom:安全区域距离底部边界距离;刘海全屏的条件下是 34px
css 函数 env() 和 constant()
上面两个函数可以直接使用变量函数,只有在 webkit 内核下才支持
env() 必须在 ios >= 11.2 才支持
constant() 必须 ios < 11.2 支持
env 和 constant 只有在 viewport-fit=cover 时候才能生效
兼容前后版本,例子:
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
如何适配处理iphoneX底部的横条 - ios的更多相关文章
- 小程序以及H5页面上IphoneX底部安全区域小黑条适配问题
背景 公司项目开发中,发现iPhoneX上吸底元素存在被小黑条遮挡的问题 原因 在苹果 iPhoneX .iPhone XR等机型上,物理Home键被取消,改为底部小黑条替代home键功能,从而导致吸 ...
- ios 适配iOS11&iPhoneX的一些坑
前阵子项目开发忙成狗,就一直没做iOS11的适配,直到XcodeGM版发布后,我胸有成竹的在iPhoneX上跑起项目,整个人都凉透了...下面总结一下我遇到的坑,不是很全面,日后补充. 导航栏 导航栏 ...
- VMware全屏时, 隐藏上方工具栏横条
VMware全屏时, 隐藏上方横条 菜单栏打开 编辑 选择 首选项 找到 显示 取消勾选 在全屏时取消固定时显示工具栏边缘
- Python_Selenium之浏览器封装_去掉浏览器受到自动化控制横条显示及去掉是否记住密码弹窗
封装如下: from selenium import webdriverfrom common.config_utils import configfrom selenium.webdriver.ch ...
- ios键盘弹起 body的高度拉长,页面底部空白问题。ios软键盘将页面抵到上面后,关闭软键盘页面不回弹的问题。
js 监听ios手机键盘弹起和收起的事件 /* js 监听ios手机键盘弹起和收起的事件 */ document.body.addEventListener('focusin', () => { ...
- 微信小游戏广告位iphonex底部适配问题
最近在公司开发游戏,使用cocos creator做微信小游戏,遇到一个很恶心的问题,如图: 如图所示,微信的广告位被iphonex的底部bar给弹出了一点位置,没有靠在底部. 在这里不得不吐槽一下微 ...
- wap2app(八)-- iphoneX 底部导航的兼容问题
iphoneX 没有home键,用其打开应用时,iphoneX的底部和应用底部导航重叠,不兼容. 解决办法: 打开manifest.json文件,在“plus”下加入以下代码(安全区域): " ...
- SWIFT显示底部的工具条
有以下页面显示我的讯息,用户可以点击右上角的编辑按钮进入删除状态.点击编辑按钮后,按钮文字改为“取消”,左上角的按钮变为“全选”,同时显示底部工具条带有“删除”按钮 实现起来挺简单的,在正常状态下点击 ...
- cordova 5.4版本 适配全面屏 底部黑边问题
在全面屏发布之后,Android官方提供了适配方案,即提高App所支持的最大屏幕纵横比,实现很简单,在AndroidManifest.xml中可做如下配置: 更改android.max_aspect值 ...
随机推荐
- R语言缺失值高级处理方法
0 引言 对于一些数据集,不可避免的出现缺失值.对缺失值的处理非常重要,它是我们能否继续进行数据分析的关键,也是能否继续大数据分析的数据基础. 1 缺失值分类 在对缺失数据进行处理前,了解数据缺失的机 ...
- 【转】了解CNN
摘要 过去几年,深度学习在解决诸如视觉识别.语音识别和自然语言处理等很多问题方面都表现出色.在不同类型的神经网络当中,卷积神经网络是得到最深入研究的.早期由于缺乏训练数据和计算能力,要在不产生过拟合的 ...
- Html和websocket初识
一.web框架 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. import socket def handle_request(c ...
- P1099 树网的核 && P2491 [SDOI2011]消防
给定一棵树, 你可以在树的直径上确定一条长度不超过 \(S\) 的链, 使得树上离此链最长的点距离最小, 输出这个距离 P2491 数据范围为 P1099 的 \(1000\) 倍 Solution ...
- poj 1284 Primitive Roots (原根)
Primitive Roots http://poj.org/problem?id=1284 Time Limit: 1000MS Memory Limit: 10000K Descr ...
- 男女通用的减肥计划 10分钟家庭hiit训练
在大城市的年轻人,一般都会比较忙,晚上下班吃完饭,到家就要8-9点了,再让他们去,有时候真的不太方便. 其实你如果想要,也不一定要,在家里做hiit运动,就可以了. hiit(高强度间歇运动),是目前 ...
- JS中的作用域和闭包
作用域:在编程语言中,作用域控制着变量与参数的可见性及生命周期.JS确实有函数作用域,那意味着定义在函数中的参数和变量在函数外部是不可见的,而且在一个函数中的任何位置定义的变量在该函数中的任何地方都是 ...
- [php]mysql操作流程
这种是比较老的一种mysql连接方法 1.连接数据库 $this->con = mysql_connect($this->host, $this->user, $this->p ...
- LintCode 58: Compare Strings
LintCode 58: Compare Strings 题目描述 比较两个字符串A和B,确定A中是否包含B中所有的字符.字符串A和B中的字符都是大写字母. 样例 给出A = "ABCD&q ...
- HDU 6205 (模拟) card card card
题目链接 Problem Description As a fan of Doudizhu, WYJ likes collecting playing cards very much. One day ...