如何适配处理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值 ...
随机推荐
- nginx让用户通过用户名密码认证访问web页面
在使用nginx转发的时候,要进行一次用户身份的确认. 1)通过htpasswd命令生成用户名及对应密码数据库文件. [root@bgs-5p173-wangwenting ~]# htpasswd ...
- python基础之02列表/元组/字典/set集合
python中内置的数据类型有列表(list)元组(tuple)字典(directory). 1 list list是一种可变的有序的集合.来看一个list实例: #第一种方法: >>&g ...
- python的函数介绍 位置参数 关键字参数 默认参数 参数组 *args **kwargs
1.数学意义的函数与python中的函数 数学意义的函数 y = 2*3+1 x =3 y =7 x是自变量,y是因变量 2.python中定义函数的方法 一个函数往往都是为了完成一个特定的功能而存在 ...
- 使用tkinter做简单计算器
代码如下: from tkinter import * #导入tkinter库 root =Tk() #给窗体 root.title('calculator') #设置窗体名字 frm=Frame(r ...
- JavaScript中的arguments详解
1. arguments arguments不是真正的数组,它是一个实参对象,每个实参对象都包含以数字为索引的一组元素以及length属性. (function () { console.log(ar ...
- Java基础-包(package)的声明与访问
Java基础-包(package)的声明与访问 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.包的概念 Java中的包,其实就是我们电脑系统中的文件夹,包里存放的是程序员生成的 ...
- 转:实现OC与JS的简易交互
oc-->js stringByEvaluatingJavaScriptFromString,其参数是一NSString 字符串内容是js代码(这又可以是一个js函数.一句js代码或他们的组合) ...
- asp.net WebForm程序删除.designer.cs文件之后的故事
1.介绍 正常情况下添加一个WebForm程序结构如下(命名为:myWebForm.aspx) 文件说明:.aspx文件:书写html代码部分,以及javascript,css等代码书写及引用 .as ...
- HDU 2095 find your present (2) 动态链表
解题报告:输入一个n,后面紧跟着输入n个数,输入的这n个数中,除了有一个数的个数为奇数外,其它的数的个数都是偶数个,现在要你找出这个个数为奇数的这个数. 看起来好像很简单的样子,不过,这题的重点不在这 ...
- opencv的基本数据结构(二)(转)
转自:原文链接,以下代码.图片.内容有点改动,只为转载不降低博客内容的可阅性,版权归原作者所有. OpenCV中强大的Mat类型大家已经比较熟悉了.这里梳理一些在工程中其他经常用到的几种基本数据类型. ...