关于适配iphoneX以上机型底部小黑条的安全区域的问题

这篇具有很好参考价值的文章主要介绍了关于适配iphoneX以上机型底部小黑条的安全区域的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

随着iPhoneX及之后的机型逐渐普及,底部小黑条的安全区域也成为了前端开发中需要特别关注的一项问题。如果不进行适配,底部小黑条可能会遮盖页面内容或者导致UI界面错乱,严重影响用户体验。本文将介绍如何使用CSS和JavaScript代码来对iPhoneX以上机型的底部小黑条的安全区域进行适配。

一、安全区域的概念

iPhoneX以上机型的屏幕底部有一个小黑条,被称为“刘海下巴”。由于该区域与屏幕区域不同,所以需要把它设置为安全区域。安全区域是指在页面布局时,可以避免内容被小黑条遮挡,保证用户界面上的体验一致性。

二、安全区域的尺寸

iPhoneX以上机型的底部小黑条高度为34px,宽度为屏幕宽度的0.1倍。我们也可以通过JavaScript代码动态获取安全区域高度和宽度,以便进行适配。

三、使用CSS适配

在CSS中,我们可以使用safe-area-inset-*系列属性来适配安全区域。

在body元素中增加以下代码,使其在小黑条区域下方留出安全距离:

body {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

其中,constant和env是CSS新引入的两个函数,用于设置变量。constant表示常量,env表示环境变量。在上述代码中,safe-area-inset-bottom表示底部安全区域的高度。

对于fixed定位的元素,可以使用safe-area-inset-*系列属性来适配。

.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

其中,padding-bottom属性用于在小黑条区域下方留出安全距离。

四、使用JavaScript适配

在JavaScript中,我们可以使用window.screen.availHeight和window.screen.availWidth来获取屏幕可用高度和宽度,从而计算出底部安全区域的高度和宽度。

获取底部安全区域高度:

function getSafeAreaHeight() {
  const screenHeight = window.screen.availHeight;
  const screenWidth = window.screen.availWidth;
  const isLandscape = screenWidth > screenHeight;
  if (isLandscape) {
    return 0;
  } else if (screenHeight >= 812) {
    return 34;
  } else {
    return 0;
  }
}

在上述代码中,如果屏幕为横屏,则底部安全区域高度为0。如果屏幕高度大于等于812px,则底部安全区域高度为34px,否则也为0px。

获取底部安全区域宽度:

function getSafeAreaWidth() {
  const screenHeight = window.screen.availHeight;
  const screenWidth = window.screen.availWidth;
  const isLandscape = screenWidth > screenHeight;
  if (isLandscape) {
    return 0;
  } else {
    const ratio = screenWidth / 375;
    return Math.floor((screenWidth - 375) / (2 * ratio));
  }
}

在上述代码中,如果屏幕为横屏,则底部安全区域宽度为0。如果屏幕为竖屏,则根据当前屏幕宽度计算出底部安全区域宽度。

使用JavaScript动态适配:

function adaptToSafeArea() {
  const safeAreaHeight = getSafeAreaHeight();
  const safeAreaWidth = getSafeAreaWidth();
  const styleText = `
    .safe-area-bottom {
      height: ${safeAreaHeight}px;
      width: ${safeAreaWidth}px;
    }
  `;
  const styleNode = document.createElement('style');
  styleNode.innerHTML = styleText;
  document.head.appendChild(styleNode);
}

在上述代码中,我们得到底部安全区域的高度和宽度后,使用JavaScript动态创建一个style标签,并设置其内部样式,然后将该标签添加至文档头部,从而实现动态适配。

总结

综上所述,使用CSS和JavaScript都可以对iPhoneX以上机型的底部小黑条的安全区域进行适配。具体选择哪种方式,可以根据项目需要和个人喜好来决定。文章来源地址https://www.toymoban.com/news/detail-529576.html

到了这里,关于关于适配iphoneX以上机型底部小黑条的安全区域的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 微信小程序适配iphoneX,XR,12及以上,获取底部安全区域

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

    2024年03月11日
    浏览(70)
  • 微信小程序 -- ios 底部小黑条样式问题

    如图,ios有的机型底部伪home键会显示在按钮之上,导致点击按钮的时候误触 App.vue 有样式问题需要修改的页面 我这里写的是:如果不是有小黑条的机型(也就是bottomHeight===0的机型),那么我的paddingBottom设为10px;如果有的话,那么paddingBottom就设为小黑条的高度bottomHeight vu

    2024年02月05日
    浏览(32)
  • 【改机教程】iOS系统去除小黑条,改拍照声、拨号音、键盘音,不用越狱,支持所有机型

    大家好,上次给大家分享了几个iOS系统免越狱改机教程 今天带来最新的教程,这次修改利用的是同一个漏洞,由外网大神 @tamago 开发,国内大神@冷风 进行汉化和优化 可以修改的地方包括 去除底部小黑条 dock栏透明 桌面文件夹透明 桌面文件夹模糊 切换器模糊 键盘声音修改

    2024年02月11日
    浏览(78)
  • 微信小程序 ---- iPhone X 以上机型留出底部安全距离

    在微信小程序设计按钮固定底部时,如果在编辑器使用的模拟器是iPhone X以下的机型时没有什么问题。 但是如果iPhone X以上的机型,会发现底部有黑条,会挡住按钮,而且操作不便。 所以我们要为底部按钮设置一个自适应高度,当机型为iPhone X以下或者安卓系统时,底边距离

    2024年02月15日
    浏览(39)
  • 微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配

    自定义微信小程序头部导航栏 自定义微信小程序头部导航栏,有几种方式 方式一 定义此方法后,头部的导航栏会去掉,导航栏下的元素会直接向上移动到原导航栏的位置,可以再app.json配置成全局沉浸式导航栏,以及在单页面配置沉浸式导航栏。 方式二 使用组件 这里使用

    2024年02月02日
    浏览(52)
  • Android底部小白条的解决方法

    大家好,我国著名数学家华罗庚先生曾说:聪明在于勤奋,天才在于积累。         在Android开发中,我们常常需要给App界面设置全屏沉浸式。但是在下发现了一个问题,当系统的手势提示条出现的时候,界面的底部就出现了一个小白条,非常影响UI的美观。如下图所示:  

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

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

    2024年02月11日
    浏览(46)
  • 群晖NAS+DMS7.0以上版本+无docker机型安装zerotier

    测试机型:群晖synology 218play / DSM版本为7.2.1 因218play无法安装docker,且NAS系统已升级为7.0以上版本,按zerotier官网说法无法安装zerotier, 不过还是可以通过ssh终端和命令方式安装zerotier。 用于存放zerotier脚本,文件夹名自定义,如zero,权限:管理员可读写,其他权限无 以管理员

    2024年01月24日
    浏览(35)
  • 微信小程序在ios端上下左右滑动以及底部滚动条的解决方案

    最近在写小程序,碰到一个非常棘手的问题,就是安卓没事,苹果手机上的页面能上下左右的滑动,不美观这里我理解为不兼容,本着有问题就去解决,苹果默认应该是滑动的,下面是解决方法 底部滚动条解决

    2024年02月04日
    浏览(130)
  • 【CSS】背景图定位问题适配不同机型

    需求 如图, 实现一个带有飘带的渐变背景 其中头像必须显示飘带凹下去那里 , 需要适配不同的机型, 一不下心容易错位 实现 因为飘带背景是版本迭代中更新的, 所以飘带和渐变背景实则两个div 飘带切图如下 , 圆形部分需要契合头像

    2024年02月13日
    浏览(37)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包