Taro底部安全区高度

2024-10-28

小程序以及H5页面上IphoneX底部安全区域小黑条适配问题

背景公司项目开发中,发现iPhoneX上吸底元素存在被小黑条遮挡的问题原因在苹果 iPhoneX .iPhone XR等机型上,物理Home键被取消,改为底部小黑条替代home键功能,从而导致吸底元素会被小黑条遮挡覆盖的问题解决方案使用已知底部小黑条高度为34px/68rpx机型适配(不建议) 使用微信官方API,getSystemInfo()中的safeArea对象进行适配(建议) 使用苹果官方推出的css函数env().constant()来适配 (建议) 安全区域看看图就明白了

js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox

做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的. 获取窗口可视范围的高度 function getClientHeight(){ var clientHeight=0; if(document.body.clientHeight&&document.documentElement.clientHeight){ var clientHeig

js获取窗口滚动条高度、窗口可视范围高度、文档实际内容高度、滚动条离浏览器底部的高度

1.获取窗口可视范围的高度 //获取窗口可视范围的高度 function getClientHeight(){ var clientHeight=0; if(document.body.clientHeight&&document.documentElement.clientHeight){ var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body

iOS - iPhone屏幕适配/启动图适配/APP图标适配(iPhone最全尺寸包含iPhoneX/XR/XS/XS Max等)

趁iPhone新品还没有发布,先整理一下屏幕适配.启动图适配.APP图标适配的笔记,方便以后查阅: 注:部分图片来源于网络违删; (一)iPhone屏幕适配: (1)屏幕分辨率: ①设计尺寸规范(表格): ②设计尺寸规范(图文): ③开发尺寸易理解: (二)iPhone刘海屏/非刘海屏PT尺寸简要图: (三)APP图标适配尺寸简要图: (四)启动图尺寸简要图: (五)部分适配相关宏定义(简要说明): /** * MARK:-屏幕尺寸宏定义 * 导航栏高度状态栏高度底部tabbar高度苹果

iPhone X系列的获取 - 安全区顶部和底部高度

///1. 获得当前窗口 var JY_WINDOW: UIWindow? { get{ if let app = UIApplication.shared.delegate as? AppDelegate { return app.window } return nil } } //2. iPhoneX系列 var iphoneX_Series: Bool { get { if UIDevice.current.userInterfaceIdiom != UIUserInterfaceIdio

jQuery判断元素离页面顶部的高度

NewBuiltBottomSheetDialog【新建底部对话框】

版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言演示在底部选项卡上方弹出底部对话框效果. 效果图代码分析 NewBuiltBottomSheetDialog继承BottomSheetDialog: 适配华为手机手动隐藏虚拟导航栏,监听屏幕高度变化: 使用步骤一.项目组织结构图注意事项: 1. 导入类文件后需要change包名以及重新import R文件路径 2. Values目录下的文件(strings.xml.dimens.xml.colors.xml等),如果项

TabBottomFragmentLayout【自定义底部选项卡区域（搭配Fragment）】

版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言自定义底部选项卡布局LinearLayout类,然后配合Fragment,实现切换Fragment功能. 缺点: 1.底部选项卡区域的高度值需要使用一个固定值,并且和使用的图片资源的高度相匹配. 比如,Demo中设置的底部选项卡的高度值为52dp,那么就需要使用drawable-xxhdpi目录下的72X72大小的图片资源.并且在图片资源中设计好内边距: 2.activity_main.xml布局文件中引用TabBottomLa

FragmentTabHostBottomDemo【FragmentTabHost + Fragment实现底部选项卡】

版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言使用FragmentTabHost实现底部选项卡效果. 备注:该Demo主要是演示FragmentTabHost的一些设置和部分功能,实际中需要参考其他Demo. 效果图代码分析 1.该Demo中采用的是FragmentTabHost的布局方案之一[命名为非常规布局写法]:[建议使用常规布局写法,见<FragmentTabHostTopDemo[FragmentTabHost固定宽度且居中]>] 2.未使用自定义的Fragm

TabLayoutBottomDemo【TabLayout实现底部选项卡】

版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言使用TabLayout实现底部选项卡切换功能. 效果图代码分析 1.演示固定模式的展现 2.演示自定义布局的实现使用步骤一.项目组织结构图注意事项: 1. 导入类文件后需要change包名以及重新import R文件路径 2. Values目录下的文件(strings.xml.dimens.xml.colors.xml等),如果项目中存在,则复制里面的内容,不要整个覆盖二.导入步骤引入依赖库在APP的build

RecyclerFullyManagerDemo【ScrollView里嵌套Recycleview的自适应高度功能】

版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言对于Recyclerview自己的LinearLayoutManager和GridLayoutManager,在版本23.2.0之后的library库中已经解决了自适应的问题: 关于RecyclerView 23.2.0新特性这个版本给 LayoutManager API 添加了新的特性:自动测量(auto-measurement)!它允许 RecyclerView 根据内容控制高度.这意味着我们可以实现之前无法实现的情景(比如

Web移动端---iPhone X适配（底部栏黑横线）

一.相信大家有被iPhone X底部黑色横线支配的恐惧上面我们可以看到,底部的导航栏被一条黑色横线所盖住,那么就很烦.下面我们可以开始进行适配环节 1.首先我们可以用 JS 判断手机环境是不是 iPhone X 代码如下 if (/iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)) { //是iphoneX console.log('是iphonex')

CSS粘住固定底部的5种方法

本文主要介绍一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部.我们知道,当内容足够多可以撑开底部到达浏览器的底部,如果内容不够多,不足以撑开元素到达浏览器的底部时,下面要讲的布局就是解决如何使元素粘住浏览器底部.需求看下图:· 方法一:全局增加一个负值下边距等于底部高度有一个全局的元素包含除了底部之外的所有内容.它有一个负值下边距等于底部的高度. <body> <div class="wrapper"> conte

RN如何固定底部的按钮

如上图的底部新增按钮,要是放在web里那是相当简单,直接是用固定定位就行,但是在RN里是没有固定定位可言的. 方案一: 采用绝对定位,相对于最外层的定位在底部位置.(在部分安卓机上有问题,动态计算的高度,定位底部的高度有问题,导致底部按钮定位脱离了视野) 正确方案:还是flex布局好用. 大致如上图,头部导航<HeaderView> 是固定的,剩下的就是 <SegmentedControl> 组件(红色方框区域) 设置属性 flex:1 使它撑满剩余空间,这时候可以设置它为相对定位

element table固定表头，表的高度自适应解决方法

主要是通过在mounted生命周期中,改变tableHeight的值,来让表格的高度自适应. 标签: <el-table ref="table" :data="tableData" :height="tableHeight"></el-table> vue中的ref解释第一种JS处理方式: export default { data(){ return { tableHeight: 50, tableData: [] }

vue 移动端项目，动态控制div距离底部的距离

<template> <div class="details"> <com-nav-bar title="保险详情"> <i class="iconfont icon-xiangzuo" slot="left"></i> </com-nav-bar> <div class="details-scroll-wrapper" ref=

H5手机端底部菜单覆盖中间部分内容的解决办法

一.第一种Js动态计算中间内容的高度. 二.第二种给底部上面写个<div style="底部的高度"></div> 三.第三种给中间部分写一个margin-bottom:底部的高度. 四.第二种实现. <!DOCTYPE html> <html lang="en"> <head> <title>H5页面通用配置</title>  &l

如何实现 antd table 自动调整可视高度(纵向滚动条,scrollY)

一.事情的起因最近在做的项目中有大量的表格,正常的表格高度是没有限制的,数据量很大的时候会出现表格内容以及分页信息超出可视窗口, 为了查看超出的部分就需要滚动页面但是这样就会把查询条件等信息滚出可视窗口滚动后的页面: 而产品经理又想要把所有信息都同时展现在页面中.这样就需要给表格内容设置一个固定的高度,怎么实现呢? 二.Table scroll 属性的应用这个还是比较简单实现的,因为antd Table 有一个属性scroll: <Table className="component

获取不同机型微信小程序状态栏+导航栏高度

获取不同机型微信小程序状态栏+导航栏高度一. 前言很多时候我们开发微信小程序,都需要先知道状态栏和导航栏的高度,才能去做其他功能二. 获取微信小程序状态栏高度用wx.getSystemInfoSync()[官方文档]获取系统信息,里面有个参数:statusBarHeight(状态栏高度),是我们后面计算整个导航栏的高度需要用到的. let res = wx.getSystemInfoSync(); let statusHeight = res.statusBarHeight; // 注意

flutter屏幕适配

现在的手机品牌和型号越来越多,导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同, 比如我们的设计稿一个View的大小是300px,如果直接写300px,可能在当前设备显示正常,但到了其他设备可能就会偏小或者偏大,这就需要我们对屏幕进行适配. 安卓原生的话有自己的适配规则,可以根据不同的尺寸建立不同的文件夹,系统会根据当前的设备尺寸取对应的大小的布局.而flutter本身并没有适配规则,而原生的又比较繁琐,这就需要我们自己去对屏幕进行适配. 点击直达github地址如果有帮助,请给我

ios 适配iOS11&iPhoneX的一些坑

前阵子项目开发忙成狗,就一直没做iOS11的适配,直到XcodeGM版发布后,我胸有成竹的在iPhoneX上跑起项目,整个人都凉透了...下面总结一下我遇到的坑,不是很全面,日后补充. 导航栏导航栏高度的变化 iOS11之前导航栏默认高度为64pt(这里高度指statusBar + NavigationBar),iOS11之后如果设置了prefersLargeTitles = YES则为96pt,默认情况下还是64pt,但在iPhoneX上由于刘海的出现statusBar由以前的20pt变成了

Taro底部安全区高度

热门专题