css适配刘海屏手机

刘海屏的手机会出现的问题。

底部的内容太靠底部边了有的可能还会被截断。底部是固定的fixed定位bottom：0

我们可以在最下面这个元素的外层加个样式

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

注意：env() 跟 constant() 需要同时存在，而且顺序不能换

如果只是底部的一个回到顶部的按钮，他也是需要固定在侧边的但是位置不是bottom：0；

可以使用

{margin-bottom: constant(safe-area-inset-bottom);margin-bottom: env(safe-area-inset-bottom);
}

iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

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

css适配刘海屏手机相关推荐

CSS 适配刘海屏 CSS适配iOS屏幕 ios可视窗口
CSS 适配刘海屏 CSS适配iOS屏幕 ios可视窗口由于苹果手机上面刘海会遮挡住一些内容,所以我们在开发的时候需要进行一些适配 //使用padding-top的让内容往下挤,适配刘海屏 padd ...
iOS灵活适配刘海屏手机的顶部状态栏高度和底部安全距离
我们知道在刘海屏手机出来之前,iOS App的顶部状态栏高度为20pt,导航栏的可布局区域高度为44pt,整个导航栏高度为64pt,底部安全距离为0. 在刘海屏手机出来后,刘海屏机型iOS App的顶 ...
CSS适配刘海屏的几种方式
前言前些年的iphone X一出现手机厂商纷纷取消了实体的物理按键,ios取而代之的是底部的一个大横条安卓这边基本上也有不少虚拟按键的厂商就会导致一些比较奇葩的问题出现比如这种的情况的发生 ...
iOS 适配刘海屏刘海状态栏底部安全距离
刘海屏出来前状态栏:20pt 导航栏:44pt 底部安全距离:0pt tabBar: 49 刘海屏出来后状态栏:44pt 导航栏:44pt 底部安全距离:34pt tabBar: 49 代码 // ...
华为刘海屏手机安卓O版本适配指导，参考华为
华为刘海屏手机安卓O版本适配指导 1. 背景刘海屏指的是手机屏幕正上方由于追求极致边框而采用的一种手机解决方案.因形似刘海儿而得名.也有一些其他叫法:挖孔屏.凹口屏等,本文档统一按照刘海屏来命名.市 ...
android 刘海屏手机适配
刘海屏介绍: https://blog.csdn.net/djy1992/article/details/80689308 https://blog.csdn.net/mysimplelove/art ...
android刘海屏手机专业术语叫什么,Android刘海屏适配精炼详解
一.前期基础知识储备 image 话不多说,这么多刘海屏手机今年集中爆发,所以尽管刘海屏不好看,但是还是要适配. 2017年苹果X开启了刘海屏时代,2018年集中爆发,纷纷采取刘海屏这一策略来实现全面 ...
如何适配刘海屏和水滴屏手机？
/** * 判断当前是否是刘海屏,目前只是针对于Android P有效,其他的默认都是非刘海屏 * @return */ public static boolea ...
Android 适配刘海屏之判断手机是否是刘海屏
话不多说直接上代码判断vivo是否有刘海屏 /*** 判断vivo是否有刘海屏* https://swsdl.vivo.com.cn/appstore/developer/uploadfile/2 ...

css适配刘海屏手机

css适配刘海屏手机相关推荐

最新文章

热门文章