前端适配刘海屏 ,水滴屏等
发布日期:2021-05-08 09:49:12
浏览次数:19
分类:技术文章
本文共 1609 字,大约阅读时间需要 5 分钟。
前端适配苹果刘海屏,安卓刘海屏水滴瓶
随着ios android 的不断更新换代。各种屏幕适配真是一个头疼的问题。
随着各种项目被打包成app上线。我们在一些全面屏手机上总会遇到下边的情况,1,3为正常的情况(iphone11 微博)2,4为适配有问题的(iphone11 某app),安卓也会有这样的问题,对于这样的问题令前端的我们很难受,下边我们提供解决这个问题的方法。
其实w3c早就为我们提供了解决方法(CSS3新特性viewport-fit)
在w3c.org官方给出的关于圆形展示(Round display)的标准中, 提到了viewport-fit这一属性,这个属性表明了对于某些屏幕并不是矩形形状的设备的时候浏览器该如果进行显示。LOL传送:
CSS3新特性env以及var预定义变量。
在定义以后viewport-fix以后, 浏览器会自动生成四个padding变量,即用来将页面向内挤压到可以正常显示的位置。这个时候需要用到env或者constant来将变量转换成CSS属性值并且赋值给属性。ps:env好像还在开发中,好像只支持IOS 11.2及以上。目前比较稳妥的方法就是constant和env一起使用。LOL传送:
详细做法
viewport-fit取值如下: | |
---|---|
auto | 默认:viewprot-fit:contain;页面内容显示在safe area内 |
cover | viewport-fit:cover,页面内容充满屏幕 |
首先我们先加上这个属性
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请单独定义
转载地址:https://blog.csdn.net/lbchenxy/article/details/103062613 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
很好
[***.229.124.182]2024年04月06日 14时51分04秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
linux安装FastDFS+Nginx
2019-04-26
FastDFS上传文件示例
2019-04-26
Zookeeper集群
2019-04-26
SpringDataJPA入门及四种查询方式
2019-04-26
Spring Cloud Eureka & Spring Cloud Feign
2019-04-26
Spring Cloud Config & Spring Cloud Bus
2019-04-26
微服务容器部署与 jenkins 持续集成
2019-04-26
容器管理与容器监控
2019-04-26
java爬虫框架—WebMagic
2019-04-26
Java 基础之反射
2019-04-26
一起来学MySQL—常用内置函数
2019-04-26
Spring 核心 之 IOC
2019-04-26
一起来学MySQL—事务的隔离级别
2019-04-26
直连线和交叉线的区别
2019-04-26
数据库视频—使用.Net访问SQL Server
2019-04-26
数据库视频—总结
2019-04-26
简单工厂模式和策略模式的比较
2019-04-26
简单工厂、工厂方法、抽象工厂模式
2019-04-26
单例模式
2019-04-26
组合模式
2019-04-26