解决iphoneX显示问题的几个css属性
来源:互联网 发布:ubuntu 服务器配置 编辑:程序博客网 时间:2024/06/05 01:18
网上的删除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设定为
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
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属性
- 解决iPhoneX push过程中tabbar上移的问题
- IE下CSS属性float:right下移换行或不显示的问题原因及解决
- css特殊的几个属性
- css的几个重用属性
- 解决JSP中文显示问题的几个方法
- 解决IE8以下浏览器不支持CSS属性opacity的问题
- iPhoneX状态条的隐藏与显示
- 解决表格边框不显示的问题-HTML-XHTML-CSS
- 一个解决字符过长显示问题的属性
- CSS几个常见属性的含义
- 今天学习的几个字体css属性
- CSS中position的几个属性值
- iPhoneX适配解决iPhoneX跳转页面时tabbar上移问题
- iphoneX面部识别带来的隐私问题
- 【CSS】background-clip属性解决background问题。
- 关于django上传显示图片,以及css,js等样式的显示问题的解决
- 解决使用fread读取文件并显示时末尾多出几个空符的问题
- 图书馆管理系统中的用例图
- 人类可能的灾难:当人工智能遇上区块链
- 指针
- BZOJ 1076 奖励关 (状压期望dp)
- 如何实现一个分布式 RPC 框架
- 解决iphoneX显示问题的几个css属性
- 7、Spring技术栈-图片验证码,Spring Session使用
- 如何使用Go建开发高负载WebSocket服务器
- PullToRefreshListView
- TCP疑问记录
- javaEE面试题集锦(持续更新)
- 使用Jedis操作redis
- Vue2 局部拓展extends 先于局部mixins执行
- 用python看段子