兼容iphonex手机底部的横线处理

小麦_gz

于 2020-11-26 14:54:10 发布

阅读量927

点赞数

分类专栏： vue 小程序

本文链接：https://blog.csdn.net/weixin_43824675/article/details/110187837

版权

vue 同时被 2 个专栏收录

7 篇文章

订阅专栏

小程序

7 篇文章

订阅专栏

/* 兼容iPhoneX */
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小麦_gz

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

微信小程序适配iphoneX，XR，12的底部安全区域（底部小黑条）

summer_my_sunshine的博客

08-03

7495

问题描述：在项目页面开发过程中，有些页面的按钮是需要固定在页面底部的（比如电商项目的确认订单页）；如果直接设置bottom:0，那么在iphonex，xr，12等机型，就会出现下面左图的问题，按钮区域距离底部太近了，用户体验就会很差，按钮也不好点击。解决思路：为了适配所有的手机机型，我们需要获取到底部小黑条的高度，给固定在底部的view设置padding-bottom，增加高度；（有些手机默认是没有底部这个区域的，没有的话padding-bottom就设置为0）解决方法： 1.首先，..

Vue.js 实现 iOS 手机下面的小黑框适配

最新发布

weixin_57509111的博客

05-20

429

Vue.js 实现 iOS 手机下面的小黑框适配

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

Android开发丶一个仿IOS的底部弹窗

02-22

记录了项目中的技术点，这里是根据UI设计而仿照IOS风格的一个底部弹窗，具体应用场景五花八门。

Android仿ios风格底部弹框

05-31

Android仿ios风格底部弹框，风格一致，内容可以自定义，上面为功能键，下面最后一个为取消键，使用方便简洁。

iphoneX Home Bar 类似苹果底部操作条

12-07

安卓开发，横条使用

02-25

设置TextView的OnClickListener： TextView eq = new TextView(fa); eq.setId(40);

android 仿iphone左右滑块开关

01-23

android 仿iphone左右滑块开关，这个是网上找的别的一个组件提取而来，不同于简单的自定义控件，里面是应用了theme来设置一些属性，这也符合更高级的设计理念。放在这里是以免遗忘。有需求的就随便下载吧！

iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配

01-19

最近写小程序时，遇到了 iPhoneX 底部小黑线与内容重叠的问题，实际上是iPhoneX安全区域的适配问题，了解清楚这个问题花了挺多时间的，也实操出了结果，忍不住来总结总结。前言在苹果 iPhoneX 、iPhone XR等设备上...

使用 css 适配 iphoneX 刘海屏

小白阿里里的博客

03-30

2496

iphoneX 刘海屏幕导致 h5 页面不能正常的全屏显示了，就需要对页面进行适配，下面就详细说说如何适配。首先上一张适配之前的图：可以看到页面顶部被遮挡，底部贴着最下面 ios11 增加新特性，增加webkit 的 css 函数，css 预定义变量四个预定义变量为设定安全区域和边界的距离，如下: safe-area-inset-left：安全区域距离左边边界距离 safe-area-i...

vue在ios手机上的一些问题（这次写的h5公众号）和后面补充的小程序问题

qq_38337245的博客

11-25

1997

坑一：使用定位fixed，底部导航不显示，代码我就不写，总结就是定位套定位，心累代码太多不想贴；坑二：禁止页面放大缩小，解决：Vue 移动端禁止页面放大缩小_fuf_xyxnxss的博客-CSDN博客_移动端禁止放大缩小坑三：移动端h5页面禁止长按选择复制，解决：移动端h5页面禁止长按选择复制_艾欢欢的博客-CSDN博客坑四：苹果手机IOS点击输入框弹出键盘后，所有按钮点击位置上移，解决：苹果手机IOS点击输入框弹出键盘后，所有按钮点击位置上移_料峭春风吹酒醒，微冷，山头斜...

安卓高仿IOS下拉刷新

11-01

最近看需要做一款下拉刷新的效果，由于需要和Ios界面保持一致，所以这用安卓的方式实现了ios下的下拉刷新的粘虫效果。最新的手机版本的ＱＱ也有这种类似的效果，就是拖动未读信息的那个红色圆圈，拖动近距离的是就有这种粘虫的效果。

Android仿iPhone滚动控件源码

03-27

Android 仿iPhone 滚动控件源码

解决Android 10 全面屏底部小横条NavigationDemo.zip

07-09

解决Android 10 全面屏底部小横条NavigationDemo.zip

iOS 底部工具条

05-19

模仿系统底部弹出菜单工具框,动画实现向上推出,向下隐藏底部工具条的简单实现

仿IOS底部弹窗

11-20

高仿IOS底部弹窗已经运用到实际项目当中

小程序iphoneX适应

qq_41148886的博客

11-08

209

小程序iphoneX适应根据小程序官方文档可以将获取到的有用的信息放到全局变量中，在需要适配时使用即可

ReactNative 刘海屏适配iPhoneX

热门推荐

卓原的进化之旅

11-21

2万+

iPhoneX 出了之后 , 它的小刘海和底部的home条成为了移动端程序员需要适配的地方, 今天用ReactNative 初步在项目上尝试了适配. 先看一下iPhonex7和X上同样代码的效果图: UI适配导航栏适配 iPhoneX由于多了大圆角、传感器(齐刘海)以及底部访问主屏幕的指示遮挡，所以需要注意原有这部分内容的设计。 iOS11前导航栏的高度是64，其中statusBa...

CSS3媒体查询适配不同型号的手机 IphoneX/IphoneXR等

蒲公英芽的博客

10-21

4171

一、定义使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。二、简单使用如果文档宽度小于 300 像素则修改背景颜色(background-color)： @media screen and (max-width: 300px) { body { background-co

仿ios底部菜单栏

06-22

仿ios底部菜单栏，配置的styles，drawale比较多，整个一套，复制黏贴

iPhone X手机样机素材：Sketch与PSD格式提供下载

资源摘要信息:"iPhone X 手机样机素材包括 Sketch 和 PSD 两种格式的文件，可用于设计和展示。iPhone X 是苹果公司在2017年发布的一款具有突破性设计的智能手机，它取消了传统的Home键，引入了全面屏设计和面容ID...