首页 > 其他分享 >env(safe-area-inset-bottom) 兼容写法

env(safe-area-inset-bottom) 兼容写法

时间:2025-01-07 18:21:45浏览次数:1  
标签:area safe bottom padding inset env

先看下兼容性:

 

可以看到 @supports 兼容性很好,所以使用 @supports 做兼容是个不错的选择。

例:

		@supports (padding-bottom: env(safe-area-inset-bottom)) or
			(padding-bottom: constant(safe-area-inset-bottom)) {
			.your-dom {
				padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
				padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
			}
		}

		@supports not (padding-bottom: env(safe-area-inset-bottom)) {
			.you-dom {
				padding-bottom: 20px; /* 根据实际情况设定兜底距离 */
			}
		}

 

标签:area,safe,bottom,padding,inset,env
From: https://www.cnblogs.com/Man-Dream-Necessary/p/18658115

相关文章

  • textarea
    textarea基础库1.0.0开始支持,低版本需做兼容处理。微信Windows版:支持微信Mac版:支持微信鸿蒙OS版:支持渲染框架支持情况:Skyline(使用最新Nighly工具调试)、WebView功能描述多行输入框。该组件是原生组件,使用时请注意相关限制。通用属性属性类型默认值......
  • Unsafe
    本文整理完善自下面这两篇优秀的文章:Java魔法类:Unsafe应用解析-美团技术团队-2019Java双刃剑之Unsafe类详解-码农参上-2021阅读过JUC源码的同学,一定会发现很多并发工具类都调用了一个叫做Unsafe的类。那这个类主要是用来干什么的呢?有什么使用场景呢?这篇文......
  • 如何修改textarea内容的字体大小及字体颜色?
    在前端开发中,修改textarea内容的字体大小和字体颜色通常通过CSS来实现。以下是一个简单的示例,说明如何为textarea设置字体大小和颜色:HTML:首先,在HTML中定义一个textarea元素,并为其添加一个类名(例如,my-textarea),以便在CSS中引用。<textareaclass="my-textarea"rows="4"......
  • html map area标签,图片热点区域
    <map>和<area>标签在HTML中用于定义图像映射。图像映射是一种在图像上定义多个热点(区域)的技术,每个热点可以是一个矩形、圆或者多边形,并且每个热点都可以链接到不同的URL或者执行不同的操作。下面是关于这两个标签的详细说明和示例:<map>标签<map>标签用于定义图像映射......
  • 中文大模型内容安全测评基准(DSPSafeBench)上线,首批模型测评结果揭晓!
    中文大模型内容安全测评基准(DSPSafeBench)上线,首批模型测评结果揭晓!三所数据安全 CLUE中文语言理解测评基准 2024年12月16日11:57 浙江DSPSafeBench中文大模型内容安全测评基准公安部第三研究所数据安全技术研发中心SuperCLUE随着大模型技术不断迭代发......
  • 探索华为鸿蒙系统的多行文本输入框组件(Textarea)
    探索华为鸿蒙系统的多行文本输入框组件(Textarea)在华为鸿蒙系统的应用开发中,用户交互组件是构建出色用户体验的关键要素之一。其中,多行文本输入框组件(Textarea)为用户提供了方便的多行文本输入功能,适用于各种场景,如评论框、消息输入框等。今天,我们将深入了解Textarea组件的使用方......
  • input标签改变高度的同时如何使光标定位在左上角(不使用textarea)
    在HTML中,<input>标签通常用于创建单行文本输入框。由于它是为单行输入设计的,因此没有直接的方式来改变光标的位置或使其像<textarea>那样支持多行文本输入。不过,如果你希望模拟一个类似<textarea>的效果,但又不希望实际使用<textarea>,你可以考虑以下的方法:使用CSS来模拟:......
  • uniapp的uview2.0框架u--textarea组件(或uv-ui uv-textarea)(或uviewui u--textarea)无法
    问题描述在使用uniapp的uview2.0框架u–textarea组件时,想要使u–textarea支持换行输入,但是默认不支持换行输入,各种百度,没有找到解决问题的方案,最后只有查看源码如下但发现源码没有对属性有过多的处理,我开始怀疑是不是原生组件又问题,但是测试之后发现原生组件并没有问题,经过一天......
  • input标签和textarea文本域 清除默认样式
    <!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title></title> <style> *{ margin:0px; padding:0px; } .outerNode{ width:100%; height:100%; background-col......
  • BottomSheet组件的用法
    文章目录1.概念介绍2.使用方法3.示例代码我们在上一章回中介绍了AlertDialogWidget相关的内容,本章回中将介绍BottomSheetWidget.闲话休提,让我们一起TalkFlutter吧。1.概念介绍我们在这里说的BottomSheet是一种弹出式窗口,和上一章回中介绍的AlertDial......