css适配iPhoneX屏幕安全区

2019-11-02 admin

场景

iPhoneX对比起以前其他的手机,屏幕顶部变成了留海屏,底部取消了物理按键改成了小黑条,这种改动导致了web开发中页面上新的适配问题。

比如一些需要贴在底部的按钮,和呼起的tabBar和底部弹出框,在iphoneX上就会出现被小黑条遮挡内容,或者页面上出现白色空隙的问题。

image.png image.png

先上解决代码

<head>
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" name="viewport"/>
</head>
body {height: 100vh;}
/* 你的贴底元素↓ */
.container {
  position: aboslute;
  bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
  ...
}

几个新知识

安全区域

安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)影响,如下图蓝色区域:

Apple的官方文档:adaptivity-and-layout

viewport-fit

iOS11 新增特性,苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展,用于设置网页在可视窗口的布局方式,可设置三个值:

  • contain: 可视窗口完全包含网页内容(左图)
  • cover:网页内容完全覆盖可视窗口(右图)
  • auto:默认值,跟 contain 表现一致

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

参考文档:viewport-fit-descriptor

env

iOS11 新增特性,Webkit 的一个 CSS 函数,用于向 CSS 插入用户代理定义的变量设定安全区域与边界的距离,有四个预定义的变量:

  • safe-area-inset-left:安全区域距离左边边界距离
  • safe-area-inset-right:安全区域距离右边边界距离
  • safe-area-inset-top:安全区域距离顶部边界距离
  • safe-area-inset-bottom:安全区域距离底部边界距离

env()必须配合 viewport-fit=cover 使用!

我们最常用的就是 safe-area-inset-bottom, 这个代表着不被小黑条遮挡的安全距离。

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

image.png

参考文档:designing-websites-for-iphone-xMDN/env()

reference

https://aotu.io/notes/2017/11…

[转载]原文链接:https://segmentfault.com/a/1190000020887571

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78787.html

文章标题:css适配iPhoneX屏幕安全区

相关文章
7个你可能不认识的CSS单位
浼楁墍鍛ㄧ煡CSS鎶€鏈�鎴戜滑铏界劧寰堢啛鎮夛紝鍦ㄤ娇鐢ㄧ殑杩囩▼鍗村緢瀹规槗琚�鍥颁綇锛岃繖璁╂垜浠�鍦ㄦ柊闂�棰樺嚭鐜扮殑鏃跺€欏彉寰楀緢涓嶅埄銆� 闅忕潃web缁х画涓嶆柇鍦板彂灞曪紝瀵逛簬鏂版妧鏈�鏂拌В鍐虫柟妗堢殑瑕佹眰涔熶細涓...
2015-11-11
使用iview的组件 Table 表格,有固定列,设置其中一个列适应屏幕大小
描述 在使用iview的组件Table表格时,有固定列,表格列宽不等。 在表格平铺时,不能自适应宽度。 问题 每个列有需要设置的宽度,有固定的列,很难调整某一列的宽度为刚刚好的。此时需要某一列自适应宽度。 解决 &lt;template...
2018-09-28
css3.0参考手册
下载地址:css3.0参考手册 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
使用HTML+CSS+JS制作简单的网页菜单界面
写ABROAD项目用到了标签这个东东,其实标签在WEB上到处可见,图中就依次显示了DCC文章发布器、ABROAD后台添加数据、百度图片搜索、sf发布博客文章时贴标签的样式——标签就像浏览器里原生的checkbox一样,不过checkbox实...
2017-03-27
webpack4 css打包压缩问题
这两天一直在练习这个webpack4, 发现有好多问题和坑,做开发嘛,一定要有喜欢出问题并喜欢解决问题,坚决踩个坑填个坑的不怕死小强精神! webpack4 在配置上其实是可以是想production和development的, &#x2F...
2018-05-18
javascript实现动态导入js与css等静态资源文件的方法
本文实例讲述了javascript实现动态导入js与css等静态资源文件的方法。分享给大家供大家参考。具体实现方法如下: &#x2F;** * 动态导入静态资源文件js&#x2F;css *&#x2F; var $import = fu...
2017-03-27
nuxt scss 全局变量设置问题 nuxt-sass-resources-loader
因为百度搜不到,所以写下这篇文章 答案:https://www.npmjs.com/package… 作为非菜鸟,遇到这问题我很快就想到改webpack配置,在nuxt.conifg.js里,然而始终不行,最终放弃了自己的探索和百度的解决方...
2018-06-13
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
本文实例讲述了JS+CSS实现仿触屏手机拨号盘界面及功能模拟的方法。分享给大家供大家参考。具体如下: 首先来看一下运行效果图: 具体实现代码如下: &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W...
2017-03-23
PostCSS真的太好用了!
在PostCSS官网有着这样的对PostCSS特性介绍,箭头后面是对应功能的插件及其github地址。 PostCSS是一款使用插件去转换CSS的工具,有许多非常好用的插件,例如autoprefixer,cssnext以及CSS Modu...
2018-05-09
js+css实现上下翻页相册代码分享
这是一款基于js+css实现上下翻页相册特效代码,相册可以从上下两个方向进行切换,是一款非常实用的幻灯片特效源码。 &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot; con...
2017-03-29
回到顶部