解决iphoneX显示问题的几个css属性

网上的删除iPhoneX白边的文章：http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/

https://juejin.im/entry/59bde53ff265da065e321ca0?utm_source=gold_browser_extension

众所周知，iphoneX的面部识别功能很强大。但是在浏览器屏幕显示上，在观看上不会引起问题，但是在默认情况下会有一些显示问题。

1、因为正常情况下会有上下两个白色的边框，如果网页背景色不是白色或者其他单色的颜色会显得非常突兀，

解决方式：给body标签加上background-color，背景色为网页颜色。

2、如果你喜欢对设计有额外的控制，或者使用渐变或图像作为背景，那么设置背景颜色可能是不可行的。在苹果的iOS的最新版本增加了viewport-fit，全屏幕显示网页，在meta标签把viewport设定为

3、设置safe-srea-inset-*确保安全边界：

因为横屏时画面右侧会被那一块感应器给挡住，而Home Bar等空间由于保留给系统使用，链接也会失效，会造成体验不良的状况。Apple提供了几个CSSProperties来处理：

constant(safe-area-inset-top)

constant(safe-area-inset-right)

constant(safe-area-inset-bottom)

constant(safe-area-inset-left)

在设置viewport-fit后使用这几个css属性：

.container {padding-top: constant(safe-area-inset-top);padding-right: constant(safe-area-inset-right);padding-bottom: constant(safe-area-inset-bottom);padding-left: constant(safe-area-inset-left);
}

就可以修正全屏时内容与系统保留区重叠的问题。

解决iphoneX显示问题的几个css属性相关推荐

DW中CSS属性详解
作者:未知来源:5D多媒体在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性,Dreamweaver把这些属性分为Type(类型).Background(背 ...
【重识 HTML + CSS】基本 CSS 属性
[重识 HTML + CSS] CSS 简介内联样式.文档样式表.外部样式表 @charset.@import 注释 HTML 和 CSS 的编写准则设置网页的图标常用 CSS 属性初识 CS ...
如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)
如何使text-overflow:elipsis起作用? 想要使用css属性text-overflow:elipsis起到作用,样式必须跟overflow:hidden; white-space:no ...
vue中使用指令解决iphonex底部的适配问题
vue中使用指令解决iphonex底部的适配问题 1.全局自动化加载指令 1.1 在src新建directives文件夹,并且新建index.js 1.2 在main.js引入directives/i ...
java返回字符串浏览器换行_解决浏览器显示页面长字符串换行问题总结
问题产生在web页面HTML中,容器(div,table等)中如果放入过长的字符串(英文.数字和部分标点符号组成,无空格),将会撑大容器,破坏页面外观. 出现这种情况基本有两个可能: 1. 人为的恶 ...
解决iphonex开发时顶部和底部没有遮盖
参考了https://blog.csdn.net/qq_40586973/article/details/79919892 前端开发VUEtify移动端框架.其实大同小异,理解了操作都是一样 ==== ...
html 空格显示不出来了,html 解决空格显示问题
前端开发者都知道,在html中手动输入多个空格或者是回车,在页面解析的时候都被解析成一个空白显示,但有时候的需求要求显示多个空格,这个问题怎么解决呢?根绝我个人的经验,目前找到了以下集中解决办法: 1 ...
使用5.0.0版本的cssbox将html文件转为图片文件，并解决字体显示问题
使用5.0.0版本的cssbox将html文件转为图片文件,并解决字体显示问题 1. 引入依赖 2. 编写Util类 3. 调用Util 4. 存在的问题 5. 解决字体不兼容问题 6. 官方文档在 ...
css超过两行显示为..._使用这些不太常用的CSS属性，布局效率上又提高了一个层次...
有很多CSS属性,有些人不了解,或者他们了解它们,但是忘记在需要时使用它们.其实,有时候我们用 JavaScript 来实某些交互,CSS 一个属性就能搞定了,这可以大大节约我们编码的时间. 作为前端 ...

解决iphoneX显示问题的几个css属性

解决iphoneX显示问题的几个css属性相关推荐

最新文章

热门文章