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

这篇具有很好参考价值的文章主要介绍了小程序IOS安全区域优化:safe-area-inset-bottom。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近发现公司的小程序代码中有一些很陌生的代码safe-area-inset-bottom,本以为是什么高级用法,查阅资料才发现是我孤陋寡闻了,原来是css的属性。

先来说一下用法及作用:

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-inset-bottom));
	height: calc(100% -  env(safe-area-inset-bottom));
}

tips:先使用constant 再使用 env

知识点扫盲

下面把相关知识点整理如下:
env() 与 constant() 设置安全区域,是css里IOS11新增的属性,webkit的css函数,用于设定安全区域与边界的距离,有4个预定义变量:

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

需要的注意一点:H5网页设置 viewport-fit=cover的时候才会生效,小程序里的viewport-fit默认是 cover。
为了更好的理解上文意思,我们来看一下未适配的底部效果:
constant(safe-area-inset-bottom),微信小程序专栏,微信小程序
constant(safe-area-inset-bottom),微信小程序专栏,微信小程序
适配后的效果:
constant(safe-area-inset-bottom),微信小程序专栏,微信小程序文章来源地址https://www.toymoban.com/news/detail-635598.html

到了这里,关于小程序IOS安全区域优化:safe-area-inset-bottom的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【移动端应用开发】 以 uniapp 打包成 APP 或小程序后或 H5 后 IOS(iphoneX 机型)底部安全区域适配(避开底部黑条虚拟键)

    一、前言 在使用 uniapp 进行应用开发时,可能会遇到应用在 iPhone X 等带有底部安全区域的机型上显示不正常的问题。这是因为 iPhone X 及之后的机型采用了全面屏设计,屏幕底部有一个黑色的虚拟键区域,俗称\\\"刘海\\\"或\\\"黑条\\\"。为了避免应用内容被底部安全区域遮挡,需要进行

    2024年02月19日
    浏览(74)
  • uniapp中ios底部安全区域问题

    1、App:在manifest.json源码视图中找到app-plus,添加safearea配置 2、给page设置CSS 3、找到template.h5.html文件,给meta添加viewport-fit=cover

    2024年02月11日
    浏览(41)
  • CSS_IOS适配状态栏和IOS底部安全区域

    计算属性 先constant再env 计算属性 safe-area-inset-left: 安全区域距离左边界的距离 safe-area-inset-right: 安全区域距离右边界的距离 safe-area-inset-top: 安全区域距离顶部边界的距离 safe-area-inset-bottom: 安全区域距离底部边界的距离

    2024年02月10日
    浏览(40)
  • uniApp解决ios app真机底部安全区域(空白)问题

    首先我们要打开项目中的manifest.json文件,找到开源码视图配置,添加和修改: 视图如下:

    2024年01月24日
    浏览(40)
  • Packet Tracer - 综合技能练习(配置各种 IOS 功能,包括 AAA、SSH 和基于区域的策略防火墙 (ZPF),以保护路由器的安全)

    Packet Tracer - 综合技能练习 地址分配表 设备 接口 IP 地址 子网掩码 默认网关 R1 G0/0 209.165.200.233 255.255.255.248 不适用 S0/0/0 (DCE) 10.10.10.1 255.255.255.252 不适用 环回接口 1 172.20.1.1 255.255.255.0 不适用 R2 S0/0/0 10.10.10.2 255.255.255.252 不适用 S0/0/1 (DCE) 10.20.20.2 255.255.255.252 不适用 R3 G0/1 172.

    2024年02月11日
    浏览(37)
  • env(safe-area-inset-bottom)解决ios底部小黑线遮挡问题

    最近在做微信小程序,有一个功能是提交按钮放在屏幕底部,使用了position:absolute定位,bottom设置为0,正常显示应该是这样的 : 但是自测的时候发现如果在部分ios机型,比如iPhoneX、iPhone12/13的时候,按钮会被ios底部的小黑线所遮挡一部分: 这样显示明显不太友好,因此研

    2024年02月16日
    浏览(63)
  • 微信小程序不同机型底部安全区域问题

    在微信小程序开发过程中,有些页面底部按钮是固定在底部的,还有如果是自定义tabbar也是需要固定在底部的,这里有两个问题: 不同机型的底部安全区域不同,如有些苹果手机底部有操作栏,这部分距离需要留出来否则会遮挡内容 如果底部有固定定位元素,可能会导致内

    2024年02月11日
    浏览(48)
  • 微信小程序兼容iphone适配安全区域

    背景:    小程序页面底部在ios中会有小黑条遮挡 上代码: 项目描述:   微信小程序是通过 webview 组件嵌入H5网页,需要解决适配安全区域问题。  首先无法在微信小程序内做任何操作,因为 webview 添加padding-bottom样式无效,且webView会自动铺满整个小程序页面, 需要在嵌入

    2024年04月14日
    浏览(39)
  • uniapp开发小程序,设置iphone底部安全区域

    上面dom结构的,根据需求是这样的:整个屏幕被两个view占满,其中底部view是固定在底部不动的,content内容立马是高度盛满剩下屏幕高度,并且overflow:scorll ; safeArea里面的动态样式中的safeAreaBottom是vuex保存的值,后面加的114,是底部高度再略高一点:“100+14” ,其中14你给

    2024年02月12日
    浏览(57)
  • 微信小程序适配iphoneX,XR,12及以上,获取底部安全区域

    iphone x及以上的异形屏top高度为44px(或以上),非异形屏为20px。 先判断是否为异形屏,如果是,获取到底部小黑条区域的高度。在页面设置底边距padding-bottom/margin-bottom,把内容区域隔开。 小黑条区域高度=屏幕高度-安全区域的bottom值,安全区域指的是内容可见区域 注意小

    2024年03月11日
    浏览(72)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包