前端适配苹果刘海屏，安卓刘海屏水滴瓶

随着ios android 的不断更新换代。各种屏幕适配真是一个头疼的问题。

随着各种项目被打包成app上线。我们在一些全面屏手机上总会遇到下边的情况，1，3为正常的情况（iphone11 微博）2,4为适配有问题的（iphone11 某app），安卓也会有这样的问题，对于这样的问题令前端的我们很难受，下边我们提供解决这个问题的方法。

其实w3c早就为我们提供了解决方法（CSS3新特性viewport-fit）

在w3c.org官方给出的关于圆形展示(Round display)的标准中，提到了viewport-fit这一属性，这个属性表明了对于某些屏幕并不是矩形形状的设备的时候浏览器该如果进行显示。LOL传送:viewport-fit官方参考文档

CSS3新特性env以及var预定义变量。

在定义以后viewport-fix以后，浏览器会自动生成四个padding变量，即用来将页面向内挤压到可以正常显示的位置。这个时候需要用到env或者constant来将变量转换成CSS属性值并且赋值给属性。ps:env好像还在开发中，好像只支持IOS 11.2及以上。目前比较稳妥的方法就是constant和env一起使用。LOL传送：env和var变量说明

详细做法

viewport-fit取值如下：
auto	默认：viewprot-fit:contain;页面内容显示在safe area内
cover	viewport-fit:cover,页面内容充满屏幕

首先我们先加上这个属性
viewport-fit=cover"（最重要的代码为，不加下边的代码可能出现问题）

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

/* body 在横屏底下和竖屏底下一定要做好定位，不然*//* 竖屏底下的查询 */@media screen and (orientation: portrait) {body {/* 防止页面被刘海遮住 */padding-top: constant(safe-area-inset-top);//以防万一写一个你本身适配其他手机的padding-top:0px;}}/* 横屏底下的查询 */@media screen and (orientation: landscape) {body {/* IOS 11支持*/padding-right: constant(safe-area-inset-right);padding-left: constant(safe-area-inset-left);padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px /*IOS 11.2版本版本支持*/padding-right: env(safe-area-inset-right);padding-left: env(safe-area-inset-left);padding-bottom: env(safe-area-inset-bottom);//以防万一写一个你本身适配其他手机的padding-right:0px;padding-left:0px;padding-bottom:0px;}}
如果用header和footer请单独定义

前端适配刘海屏 ,水滴屏等相关推荐

刘海屏水滴屏小米89等安卓P底部留黑or白适配
刘海屏水滴屏小米89等安卓P底部留黑or白适配一问题一些老旧项目安装到目前安卓高版本,会出现手机底部留黑or白二瞬秒解决 Android官方提供了适配方案,即提高App所支持的最大屏幕纵横比 ...
Flutter适配安卓刘海、水滴屏显示全屏
配置Android 找到android/app/src/main/res/values目录,打开styles.xml 将shortEdges放到style标签内. <?xml version=& ...
Android刘海屏、水滴屏全面屏适配方案
原文地址:https://www.jianshu.com/p/2b8db60ba8df 我将适配方案整理后,封装成了一个库并上传至github,可参考使用项目地址: https://github.c ...
Android刘海屏、水滴屏全面屏适配
现在,市面上的屏幕尺寸和全面屏方案五花八门.这里我使用了小米的图来说明: 上述两种屏幕都可以统称为刘海屏,不过对于右侧较小的刘海,业界一般称为水滴屏或美人尖.为便于说明,后文提到的「刘海屏」「刘海区」 ...
Android刘海屏、水滴屏全面屏适配方案，海量算法高频面试题精编解析
对Activity生效,意味着可以针对单个页面进行刘海屏适配,设置了该属性的Activity系统将不会做特殊处理: 方案二对Application生效,意味着该应用的所有页面,系统都不会做竖屏场景的 ...
Java安卓适配全面屏_GitHub - chnagzhaolin/NotchScreenTool: Android刘海屏、水滴屏等全面屏适配工具...
NotchScreenTool 适配刘海屏水滴屏等全面屏工具具体的适配过程可以查看这篇博客: 安装项目根目录的build.gradle中添加: allprojects { repositories ...
Android 刘海屏全屏适配（沉溺式状态栏，隐藏状态栏）
@RequiresApi(Build.VERSION_CODES.LOLLIPOP)override fun onCreate(savedInstanceState: Bundle?) {super. ...
Unity 打包APK 适配全面屏、刘海屏、水滴屏、挖孔屏
目录一.全面屏适配细节二.刘海上方有黑条怎么解决三.去除屏幕下方黑色区域一.全面屏适配细节目前国内流行的手机厂商主要有:vivo.oppo.华为.小米.各厂商对刘海屏的适配都大不相同,各自有 ...
【Android 屏幕适配】异形屏适配 ① ( 异形屏类型:刘海屏、水滴屏、挖孔屏 | 沉浸式布局刘海屏适配 | 华为手机异形屏适配注意点 )
文章目录一.异形屏类型:刘海屏.水滴屏.挖孔屏二.沉浸式布局刘海屏适配三.华为手机异形屏适配注意点屏幕适配参考文档 : 设备兼容性概览屏幕兼容性概览支持不同的像素密度声明受限屏幕支持异 ...

前端适配刘海屏 ,水滴屏等

前端适配苹果刘海屏，安卓刘海屏水滴瓶

其实w3c早就为我们提供了解决方法（CSS3新特性viewport-fit）

CSS3新特性env以及var预定义变量。

详细做法

前端适配刘海屏 ,水滴屏等相关推荐

最新文章

热门文章