css iphone安全底部

已于 2024-01-17 17:46:22 修改
阅读量2.2k 收藏
点赞数 1
分类专栏： css 兼容 文章标签： css 前端
于 2023-03-01 09:28:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/paipaicui/article/details/129274481
版权

css适配iphone安全底部

1.在我们的index.html页面的meta标签 viewport添加一个属性viewport-fit=cover，h5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover。

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

2.样式表里配置

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

因为是这是安全底部，所以配置safe-area-inset-bottom

    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    // 先constant再env

iphone手机总是有各种各样的兼容性问题，这也算其中之一吧
在这里插入图片描述

paipaicui
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序以及H5页面上IphoneX底部安全区域小黑条适配问题
03-29
背景 公司项目开发中，发现iPhoneX上吸底元素存在被小黑条遮挡的问题 原因 在苹果 iPhoneX 、iPhone XR等机型上，物理Home键被取消，改为底部小黑条替代home键功能,从而导致吸底元素会被小黑条遮挡覆盖的问题 解决方案 使用已知底部小黑条高度为34px/68rpx机型适配(不建议) 使用微信官方API，getSystemInfo()中的safeArea对象进行适配（建议） 使用苹果官方推出的css函数env()、constant()来适配 （建议） 安全区域 看看图就明白了，中间绿色区域即为安全区域。也就是说，适配安全区域也就是让小程序或者H5的内容显示在绿色区域部分。
iphone刘海屏页面适配方法
11-29
1. 下面是实现iphonex 刘海屏前端页面适配的一个插值算法小案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body, ul { margin: 0; } ul { padding-left: 10px; } li { list-style: none; } .phone { position: relative; w
uniapp 适配部分IPhone手机底部安全距离
廖若星辰-LTY
11-23 2144
部分 IOS 机型，比如 Iphone X 的屏幕底部有一条“小黑线”区域，uniapp 项目中我们可以使用CSS的env(safe-area-inset-bottom) 语句来自适配 IOS 的底部安全区域高度，这个语句会返回该机型的底部安全区域高度（单位 px）。
CSS设置移动端页面底部安全距离
qq_17355709的博客
03-25 559
env(safe-area-inset-bottom)是一个CSS属性值，用于设置底部安全距离。它表示使用环境变量来获取底部安全距离的值。当使用环境变量时，需要使用env()函数来引用具体的环境变量。这将把.box元素的底部padding设置为环境变量safe-area-inset-bottom的值。
css属性——env()和constant()设置安全区域
热门推荐
青云码上的博客
11-16 1万+
env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量： safe-area-inset-left：安全区域距离左边边界的距离 safe-area-inset-right：安全区域距离右边边界的距离 safe-area-inset-top：安全区域距离顶部边界的距离 safe-area-inset-bottom ...
css3安卓Android（苹果iphone）桌面底部导航菜
06-05
适合安卓Android网页底部的一款导航效果，点击箭头显示隐藏的导航按钮。
css 安全区域 safe-area-inset-
sayyy的专栏
02-15 5972
略
小程序设置底部安全距离
qq_48795670的博客
08-25 3542
都是用于设置底部安全距离的CSS属性值，但它们的使用方式和适用环境略有不同。具体使用哪个取决于您所使用的环境或框架的要求。函数是CSS的通用函数，可以在任何支持的环境中使用。因此，在不同的环境或框架中，这两个函数的使用方式可能会有所不同。是CSS的一个属性值，用于设置底部安全距离。它表示一个固定的值，可以直接使用具体的像素值来设置。都是CSS中的属性值，用于在小程序中设置底部安全距离。函数是WebKit的CSS函数，用于在小程序中设置底部安全距离。元素的底部padding设置为底部安全距离的值。
关于适配iphoneX以上机型底部小黑条的安全区域的问题
weixin_63929524的博客
05-08 3890
综上所述，使用CSS和JavaScript都可以对iPhoneX以上机型的底部小黑条的安全区域进行适配。具体选择哪种方式，可以根据项目需要和个人喜好来决定。
苹果全面屏适配安全距离（safeArea）H5的屏幕适配
weixin_65825664的博客
12-03 1833
苹果全面屏适配安全距离（safeArea）H5的屏幕适配
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配 ...
03-29
最近写小程序时，遇到了 iPhoneX 底部小黑线与内容重叠的问题，实际上是iPhoneX安全区域的适配问题，了解清楚这个问题花了挺多时间的，也实操出了结果，忍不住来总结总结。 本文目录 前言 · 内容与小黑线重叠情况说明 1.安全区域含义 2.微信小程序适配iPhoneX底部小黑条(Home Indicator) （1）适配方案一：使用已知底部小黑条高度34px/68rpx来适配（不推荐） （2）适配方案二：使用微信官方API，getSystemInfo()中的safeArea对象进行适配（推荐） （3）适配方案三：使用苹果官方推出的css函数env()、constant()来适配 （推荐）
jquery+css3安卓Android（苹果iphone）桌面底部导航菜单.zip
09-25
有兴趣刚需的可以自己下载，非常实用的特效代码，可以完美运行，有能力的还可以二次修改！
iPhoneX安全区域与H5引发的问题(Safe Area)
01-03
iPhoneX安全区域引发的问题(Safe Area) 瞧一瞧 LeetCode题解：Gitbook版本传送门 前端笔记：Gitbook传送门 目录 什么是安全区域？ 预留出Home Indicator指示条 简单总结 一、什么是安全区域？ 最近正在开发小程序相关的需求时，遇到了一个问题——ios高版本的安全区域，即iPhoneX及以上拥有的“刘海儿”等可滑动区域会与你开发的内容重合。 幸运的是，在小程序上我们只需要考虑底部的底部Home Indicator上滑指示条。 注意，官方不推荐我们粗暴的将这段区域永久的覆盖，例如压黑边隐藏设备的圆角、刘海、指示条。 同样官方推荐避免将交互元素
css：ios底部安全距离适配
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
11-05 7474
背景 我们做在 ios 的 web 页面时候，需要适配底部的黑边，加上安全距离。 IOS新特性 iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值： contain: 可视窗口完全包含网页内容 cover：网页内容完全覆盖可视窗口 auto：默认值，跟 contain 表现一致 注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewp
CSS3中的calc、constant、env函数，IOS适配以及小程序字体加粗
tangjie109411的博客
09-25 4557
CSS3中的calc、constant、env函数，IOS适配以及小程序字体加粗 1. css3中的calc()函数 最近做项目，看到别人的css中出现的，发现此函数是用于动态计算长度值。 1.1 calc()使用注意点 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 “+”, “-”, “*”, “/” 运算； calc()函数使用标准的数学运算优先级规则； 在less预编译语言中
微信小程序页面底部安全距离样式设置
weixin_38685496的博客
03-27 1763
在微信小程序中设置底部安全距离可以使用CSS中的。以下是一个示例CSS代码。
css安全区域
m0_55811177的博客
10-11 198
bottom: constant(safe-area-inset-bottom); bottom: env(safe-area-inset-bottom);
小程序 ios 全面屏底部留出安全距离
FE-阿阳的博客
04-29 8669
小程序 ios 全面屏底部留出安全距离 问题描述 对于苹果手机，底部有安全距离，一些底部会有遮挡，当然可以通过过去系统信息动态设置底部距离。下面提供一个用 css 设置底部安全距离的方案 解决方案 苹果官方推荐使用env()，constant()来适配，建议使用该方案，不需要管数值具体是多少。这2个方法是什么呢？ env()和constant()，是IOS11新增特性，Webkit的css函数...
uniapp底部安全区适配
最新发布
04-20
UniApp是一个跨平台的开发框架，可以用于同时开发iOS和Android应用。底部安全区适配是指在iPhone X及以上机型上，由于底部存在虚拟Home键，需要对底部的内容进行适配，以避免被虚拟Home键遮挡。 在UniApp中，可以通过以下几种方式来实现底部安全区适配： 1. 使用CSS属性：可以通过在底部容器的样式中添加`padding-bottom`属性，并设置为`env(safe-area-inset-bottom)`，这样可以自动适配底部安全区域的高度。 2. 使用插件：UniApp提供了一些插件来帮助实现底部安全区适配，比如`uni-iphone-x`插件。你可以在项目中引入该插件，并按照文档中的说明进行配置和使用。 3. 手动计算：如果你不想使用插件，也可以手动计算底部安全区域的高度。可以通过`uni.getSystemInfoSync()`方法获取系统信息，然后根据设备的屏幕高度和底部安全区域的高度来计算出需要适配的高度，并在代码中进行相应的处理。 以上是一些常用的方法来实现UniApp底部安全区适配的方式。根据具体的需求和项目情况，你可以选择适合自己的方式来进行实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值