是时候在项目中使用这个CSS属性了-程序员宅基地

技术标签: python  css  java  vue  html  

八月份做移动端项目的时候,同事让我帮忙看个底部安全距离的问题,我立即摩拳擦掌,原因无他,仅仅是因为当天上午我在medium闲逛时,正好看到了这篇文章:You have to start using this CSS property in your websites(https://bootcamp.uxdesign.cc/you-have-to-start-using-this-css-property-in-your-websites-7353f46def79) 我是被标题骗进去的。

183e6aeef4b4d32177c1d3962bf4bcf5.png

看完之后的感觉是,短小精悍,并且似乎很有用的样子。没想到当天就可以派上用场,我可真是太激动了。

原文如下

响应式网站每天都在变得更好。但由于某些原因,很多web开发者一直忽略了移动设备上的安全区域。比如凹槽周围的区域,以及像iPhone(x及以上)这样的设备上的 Home Bar 周围的区域。

问题说明

你有没有试过将一个元素定位到屏幕底部?

您很快遇到的问题是可见视口与交互式视口不同。移动浏览器倾向于始终优先考虑基本的 UI 元素(如 IOS 上的主页栏)的互动性。

浏览器通过实现称为“安全区域”的东西来做到这一点。这些区域不能做用户交互(当然啦,UI上展示也会异常)。

幸运的是,移动浏览器将这些安全区域存储在环境变量中,供我们使用!您的内容应该与安全区域一起工作,而不是放在它后面不可接触。

109d2e9daee68e7fad92ae4fbed5d111.png


简单的CSS解决方案

env(safe-area-inset-bottom) // or -top

通过使用浏览器提供的环境安全区变量,你可以轻松地绕过移动浏览器的安全区域。

abb3d875ee4b8a3376848efdfe01de57.png


.cookieNotice {
  position: fixed;
  right: 0px;
  left: 0px;
  bottom: 0px;
  padding-bottom calc( env(safe-area-inset-bottom) + 20px )
}

上面的代码例子将动态地在cookie弹出窗口的底部添加padding,使其在任何情况下都能在所有设备上使用。

嗨,你,我希望你能学到一些东西:)

如果你已经知道这些(并实施这些)......很好!如果没有,那就开始做吧!;)

如果没有,就开始做吧!;)

祝你有一个愉快的一天。

我遇到的问题

以上就是原文啦,接着开始的问题说,因为说了是安全距离的问题嘛,页面在移动端的浏览器中,底部的导航栏和ios的小黑线重叠在一起了。

第一步,我当然是审查元素啊,结果一看,样式里面已经有了:

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

当时我的感觉就是,啊这。。。

这是为什么?

当然是请教搜索引擎,google了下,发现安全距离需要搭配 viewport meta 使用,需要设置 viewport-fit=cover

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

我麻溜的审查代码看了下,发现这个 meta 也有。我懵圈了。

cccb05f83f57d25162b76b2eb94f2906.png

但是坚决不能认输,我继续可劲的Google,但是很遗憾,再也没有找到什么有用的信息。

然后我灵机一动,审查了下联调地址的代码,发现联调地址的代码中没有对应的 meta viewport 代码,一路追踪,发现是构建平台中模板服务配置的有问题,虽然本地的html模板是正确的,但是构建平台模板服务里面没有 viewport-fit=cover,所以最终的构建结果肯定有问题啊。

修改了下模板服务,重新构建了下,完美解决。一个小小的问题,我的心里却历经了曲折,以至于时隔一个多月,依旧印象深刻。

如果有帮助的话,分享和点赞吖~

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/liuyan19891230/article/details/120681554

智能推荐

请求模块urllib的基本使用_with open 保存图片-程序员宅基地

文章浏览阅读3.2k次,点赞54次,收藏78次。在实现网络爬虫的爬取工作时,就必须使用网络请求,只有进行了网络请求才可以对响应结果中的数据进行提取,urllib模块是python自带的网络请求模块,无需安装,导入即可使用。下面将介绍如果使用python中的urllib模块实现网络请求_with open 保存图片

Android底层JNI中的JavaVM和JNIEnv对象_jnivlzm-程序员宅基地

文章浏览阅读1.2k次。最近在做关于安卓安全方面的东西,需要对底层进行注入,在看雪论坛上看了不少资料,查阅了相关书籍了解了一下,需要用到JNI。利用JNI可以实现Java和底层的C/C++模块相互沟通(NDK的框架用到了该外观设计模式,Facade Pattern) 其具体步骤如下:(1)创建一个包含native本地方法的类;(2)利用javah工具生成C/C++语言的头文件;(3)创建.c源文件,使用C/C++实_jnivlzm

RSA算法进行 数据加解密 与 数字签名、哈希(Hash) 摘要_哈希算法与rsa算法-程序员宅基地

文章浏览阅读485次,点赞9次,收藏6次。RSA算法进行 数据加解密 与 数字签名;_哈希算法与rsa算法

HTML、CSS、JS实现轮播图效果:包含分页按钮及切换箭头_html轮播图添加左右箭头-程序员宅基地

文章浏览阅读3.2k次。HTML、CSS、JS实现轮播图效果:包含分页按钮及切换箭头_html轮播图添加左右箭头

Android渲染(一)------ Shader之SweepGradient用法(雷达扫描效果)_android sweepgradient-程序员宅基地

文章浏览阅读707次。Shader定义:官方的定义是这样的: Shader是返回水平跨度颜色的对象的基类,绘图期间。 Shader的子类安装在Paint调用中,paint.setShader(着色器)。 之后的任何对象(除了位图之外)都是使用该绘制绘制将从着色器获取其颜色。它有五个子类,分别是:SweepGradient、LinearGradient、BitmapShader、Compose..._android sweepgradient

no2222_通信emm substate-程序员宅基地

文章浏览阅读530次。222_通信emm substate

随便推点

Error:Internal error: (java.io.FileNotFoundException) D:\code\project\.idea\misc.xml (The sys-程序员宅基地

文章浏览阅读1.6k次。 Intellij idea找不到misc.xml文件,关闭当前项目IDE,重新打开idea, File -&gt; import project,即可重新生成该文件_error:internal error: (java.io.filenotfoundexception)

每日模板一练——并查集-程序员宅基地

文章浏览阅读129次。洛谷2814极度细(毒)节(瘤)的字符串处理,以及最后一步弄错。。。。。(水了70分?)【代码~】 #include&lt;bits/stdc++.h&gt;using namespace std;const int MAXN=5e4+10;map&lt;string,int&gt; name;map&lt;int,string&gt; id;map&lt;string...

生成报表(转)-程序员宅基地

文章浏览阅读123次。使用JasperReport+iReport进行WEB开发    一、JasperReport和iReport简介:   1、JasperReport简介   JasperReport是一个强大、灵活的报表生成工具,是开放源代码组织sf.net中的...

哈希表-程序员宅基地

文章浏览阅读3k次,点赞5次,收藏18次。初入数据结构的哈希表(Hash Table)这次我们来总结一下关于哈希表的知识,首先我们要了解什么是哈希表,哈希函数的构造思路有哪些?怎么解决哈希冲突?最后再去分析一下哈希查找算法。哈希表的概念 前提小知识什么是哈希表?哈希表的四个概念关键字、值、哈希函数、哈希地址、哈希表之间的关系?什么是哈希冲突常见的哈希函数构造方法 怎么样才是好的哈希函数?常见构建哈希函数的六个方法...

VS报错 error LNK2005: _DllMain@12 已经在 MSVCRTD.lib(dllmain.obj) 中定义 链接报错: 错误 33 error LNK2005: _DllMai_error lnk2005: _dllmain@12 已经在 msvcrtd.lib(dll_dll-程序员宅基地

文章浏览阅读584次。VS报错 error LNK2005: _DllMain@12 已经在 MSVCRTD.lib(dllmain.obj) 中定义链接报错:错误 33 error LNK2005: _DllMain@12 已经在 MSVCRTD.lib(dllmain.obj) 中定义 E:\客户问题\w_王鹏\EventLibTest_TibrvAlternative_Mult_error lnk2005: _dllmain@12 已经在 msvcrtd.lib(dll_dllmain_stub.obj) 中定义

什么是soap_soap是指什么-程序员宅基地

文章浏览阅读645次。SOAP (Simple Object Access Protocol) 顾名思义,是一个严格定义的信息交换协议,用于在Web Service中把远程调用和返回封装成机器可读的格式化数据。事实上SOAP数据使用XML数据格式,定义了一整套复杂的标签,以描述调用的远程过程、参数、返回值和出错信息等等。而且随着需要的增长,又不得增加协议以支持安全性,这使SOAP变得异常庞大,背离了简单的初衷。另一方面,各个服务器都可以基于这个协议推出自己的API,即使它们提供的服务及其相似,定义的API也不尽相同,这又导致.._soap是指什么