IOS全面屏底部安全区设置

最新推荐文章于 2025-05-08 20:27:56 发布

Root1216

最新推荐文章于 2025-05-08 20:27:56 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： ios flutter

本文链接：https://blog.youkuaiyun.com/Root1216/article/details/122435292

本文介绍了一种在不同版本的iOS系统中实现底部安全区域兼容的方法。通过使用constant(safe-area-inset-bottom)来兼容iOS小于等于11.2的版本，而使用env(safe-area-inset-bottom)来兼容iOS大于11.2的版本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Root1216

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

android 获取刘海高度,android 刘海尖和全面屏底部多出安全区域

weixin_32102617的博客

05-25

1538

android 刘海尖和全面屏底部多出一定高度，目测接近iOS安全区域高度。但是配置的是无安全区域，plus.navigator.getSafeAreaInsets()获取的四个值都是0，sdk版本是2019年12月11日版本manifest配置:"safearea" : {"background" : "none","bottom" : {"offset" : "none"}}css:.am-h...

小程序对IPhone全面屏手机底部黑线的安全区域处理

weixin_45815859的博客

05-02

3574

今天在对自己写的小程序项目进行优化时发现 全面屏手机拥有底部黑线时候在app.js内定义的tabbar不会受到影响但是在部分页面内自己手写的底部tabbar会被黑线挡住内容立马去查了下API。发现了其中一种解决方式话不多说贴代码如果还有其他更优的方法欢迎留言或者私信（第一次发博客有点害羞羞） 1、安全区域首先先了解一下安全区域，安全区域指的是一个可视窗口范围，处于安全区域的内...

参与评论您还未登录，请先登录后发表或查看评论

Vant 自定义组件适配 iphone 底部安全区

热门推荐

Ryan的博客

04-28

1万+

场景： IM 问题：聊天界面输入框在iphone下被底部指示条遮盖，如下图：解决方案：提示：这里填写该问题的具体解决方案：例如：新建一个 Message 对象，并将读取到的数据存入 Message，然后 mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();换成 mHandler.sendMessage()。 <meta name="viewport" content="width=device-

小程序video至于底部_小程序对IPhone全面屏手机底部黑线的安全区域处理

weixin_40009472的博客

11-14

382

今天在编写小程序页面时发现，在iphoneX真机预览时，底部button会被手机底部黑线盖住一部分，对于我这种强迫症来说，简直不能忍。首先说下手机的安全区域安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)的影响。我用的手机是iphoneX，显示效果如上，为了美观和易用性，我们...

ios底部存在安全距离可通过设置 safe-area-inset-bottom

weixin_46495993的博客

05-08

466

padding-bottom: calc(底部距离rpx + constant(safe-area-inset-bottom));padding-bottom: calc(底部距离rpx + env(safe-area-inset-bottom));safe-area-inset-bottom ：安全距离底部边界的距离。safe-area-inset-left：安全区域距离左边边界的距离。safe-area-inset-top：安全区域距离顶部边界的距离。uniapp在安卓和iso的底部安全距离。

小程序IOS安全区域优化：safe-area-inset-bottom

sinat_33255495的博客

04-12

1万+

IOS全面屏底部有小黑线，位于底部的元素会被黑线阻挡，可以使用以下样式： .model{ padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */ } 获取高度时，可用： .model{ height: calc(100% - constant(safe-area-inse

ios底部安全距离

杨晓风迷迭香的记忆

03-05

7157

背景：目前公司开发商城小程序，对于iOS要设置底部安全距离，否则底部会被黑条遮挡技术方案： 1、苹果官方推荐：使用env()，constant()来适配，env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量： safe-area-inset-left：安全区域距离左边边界的距离 safe-area-inset-right：安全区域距离右边边界的距离 safe-area...

uni-app 全面屏、刘海屏适配（iphoneX适配）及安全区设置

dcloudio的博客

11-12

8689

iOS方案一：使用原生占位（仅App端支持） manifest.json 文件 app-plus 节点下配下 safearea "safearea": { "background": "#CCCCCC", "bottom": { "offset": "auto" } } iOS方案二：不使用原生占位（非App端可以不配置manifest） manifest.json 文件 app-plus 节点下配下 safearea "safearea": { "bott

CSS适配iPhone全面屏的方法

11-21

在iPhone全面屏的适配中，我们通常针对不同型号的iPhone设置不同的CSS规则。例如： ```css /* iPhone X 适配 */ @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-...

uniapp iphoneX刘海屏全面屏适配和安全区设置方法

qq_40669670的博客

01-23

2671

iphoneX齐刘海需要做适配，不做的话不好看，还有些全面屏手机也需要做适配，下面让我们一起来看下uniapp的几种适配方案。 iOS方案一：使用原生占位（仅App端支持） mainfest.json 文件 app-plus 节点下配下 safearea "safearea": { "background": "#CCCCCC", "bottom": { "offset": "auto" } } iOS方案二：不使用原生占位（非App端可以不配置

IOS底部安全距离配置（uniapp）

weixin_72329752的博客

09-14

1239

iPhone手机有的底部会出现安全距离，会在底部出现空白。

4.flutter_demo之底部栏

iOS开发学习笔记

01-29

475

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( ...

ios底部白条（安全区处理），让背景能够铺满安全区

Jonn1124的博客

12-23

3500

标题第一步 1.viewport-fit=cover 重点 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1, user-scalable=no,minimal-ui,viewport-fit=cover"/> 2.body 设置 body { height: 100%; width: 100%; /*overflow-x:hidden

iOS 11,新特性，安全区

ryh123456789的博客

12-26

1255

在iOS11出来之后，，对iOS 来说改变最大的就是安全区，就是刘海的问题，在这块对于iOS新的特性 iPhone X尺寸 APP启动页，即LaunchImages，需要五张不同尺寸大小的图，切记一定要选择png格式，否则打包时报错，导致APP适配失败。六张图的大小即：320×480、640×960、640×1136、750×1334、124

uniapp iOS底部安全距离

caoshaoze的博客

09-27

394

【代码】uniapp iOS底部安全距离。

env()和constant()设置安全区域

qq_52507367的博客

06-30

6738

env()和constant()设置安全区域

uni-app底部安全区调整

xinTianou123的博客

11-15

7022

uni-app底部安全区适配调整

iOS SafeArea安全区域

假装你是大灰狼的专栏

04-15

9402

1. 前言本文的出发点是对iOS设备的适配, 我们之前的适配只是考虑设备的尺寸, 设备的方向, 而在iPhoneX出来之后呢, 我们又多了一种考量, 那就是刘海和底部横条(HomeIndicator), 我们通过UIKit11.0之后新增的API来解决这个问题, 达到不同设备尺寸, 不同设备方向的完美适配。 2. 之前的做法注: 该方法只适用于设备的竖屏, 如果是横屏就会出现问题我们是用宏, 来解决这个问题的, 像这样: /** 设备屏幕宽度 */ #define LCLScreenWidth [[U

ios网页添加主屏幕,跳转不能全屏