css兼容iphoneX底部的横线

最新推荐文章于 2024-10-12 14:19:41 发布
最新推荐文章于 2024-10-12 14:19:41 发布
阅读量1.1k 收藏
点赞数
分类专栏： vue 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43824675/article/details/107986227
版权
本文介绍了一种在设计中兼容iPhoneX安全区域的方法，通过调整margin-bottom属性使用constant和env函数，确保内容不会被手机底部的home指示器遮挡。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

	/* 兼容iPhoneX */
	margin-bottom: 0;  
	margin-bottom: constant(safe-area-inset-bottom);  
	margin-bottom: env(safe-area-inset-bottom);
使用 css 适配 iphoneX 刘海屏
小白阿里里的博客
03-30 2501
iphoneX 刘海屏幕导致 h5 页面不能正常的全屏显示了，就需要对 页面进行适配，下面就详细说说如何适配。 首先上一张适配之前的图： 可以看到页面顶部被遮挡，底部贴着最下面 ios11 增加新特性，增加webkit 的 css 函数，css 预定义变量 四个预定义变量为设定安全区域和边界的距离，如下: safe-area-inset-left：安全区域距离左边边界距离 safe-area-i...
前端基础知识总结---CSS篇
Web前端开发工程师
09-09 2643
本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！ 目录 1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？ 2.CSS 选择符有哪些？ 3.::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。 4.伪类与伪元素的区别 5.CSS 中哪些属性可以继承？ 6.CSS 优先级算法如何计算？ 7.关于伪类 LVHA 的解释? 8.CSS3 新增伪类有那些？ 9.如何居中 div？ 10.disp
CSS移动端iPhoneX系列底部兼容
weixin_65635437的博客
05-22 882
CSS移动端iPhoneX系列底部兼容
纯css兼容iphonex以上手机底部横线问题
qq_42115928的博客
09-22 298
padding-bottom: 0; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
如何用CSS适配iPhoneX底部小横条
Msinwln的博客
06-08 7063
如何用CSS适配iPhoneX 前言 iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。 笔者通过查阅了一些官方文档，以及结合实际项目中的一些处理经验，整理了一套简单的适配方案分享给大家，希望对大家有所帮助，以下是处理前后效果图： 适配之前需要了解的几个新知识 安全区域 安全区域指的是一个可
css兼容iphone小黑条
星星月亮的博客
06-30 1197
兼容
CSS兼容iPhone底部小横条
jugt的博客
06-01 962
使用苹果官方推出的css函数env()、constant()来适配。 env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，
web前端面试题完美整理/涵盖html,CSS、JS、浏览器、Vue、React、移动web。
A曾大大的博客
04-15 940
本篇文章整理总结了一些前端面试题，涵盖面很广，并且面的都是知名大厂，所以这些题还是很有代表性的，都掌握以后一面基础面应该没什么问题，二面也能应付大半，奉上： css相关 更多教程：https://sucaiip.com/ 万能居中 1.margin: 0 auto;水平 2.text-align: center;水平 3.行高，垂直 4.表格，center,middle；水平垂直 5.disp...
前端布局与响应式设计综合指南(二)
最新发布
唯见青山不见君
10-12 1101
前端布局与响应式设计综合指南
微信小程序自定义tabBar实现中间圆形凸起效果
5. **iPhoneX底部横线自适应**： - iPhoneX及其他刘海屏手机在底部有一条横线，为了使自定义tabBar能够与这条横线自适应，需要在CSS中做特殊的处理。 - 可以通过检测设备型号来使用不同的布局，或者通过页面的`...
解决苹果底部安全区问题
ll1943603292的博客
03-22 612
【代码】解决苹果底部安全区问题。
如何用css适配iphoneX底部横条？！？
山野里的小菊花
10-31 6683
当我们在做app或者小程序的时候，如果是自适应屏幕高度，或者是用定位到底部按钮的时候，iphoneX底部的返回横条老是遮挡底部内容，如果巧妙的设计代码，使它能适配到iphoneX呢？ 比如我写了一个底部按钮，漂浮在所有内容的上方，以下代码当在iphoneX的时候，就会被遮挡大约20px // 正常手机使用的代码 /* 外层盒子 */ .hasbtn-padding{ paddin...
CSS笔记（兼容iphoneX）
KeePCoding
05-04 4550
要兼容IphoneX，尤其是使用 position: fixed;bottom: 0; 样式时，要确保底部栏处于安全区域，这篇文章讲得很仔细明白——《关于H5页面在iPhoneX适配》
移动端H5适配iphoneX底部栏，css快速解决方案
ZH
05-19 2552
1、meta标签放入viewport-fit=cover <meta name="viewport" content="width=device-width...... viewport-fit=cover"> 2、css设置(不要忘记将底部栏放上“footer”这个class类名) @supports (bottom: env(safe-area-inset-bottom)){ body, .footer（底部栏）{ padding-bottom: const
css适配iphonex底部安全区
Honiler的博客
03-02 2760
.safe-area-inset-bottom { padding-bottom: 0; padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2 padding-bottom: env(safe-area-inset-bottom); // 兼容 IOS>=11.2 } 注：H5设置meta标签viewport-fit值为cover才有效（小程序默认），即令页面内容充满可视窗口，而非默认auto/c..
常用数组字符串数据操作
热门推荐
southone_problem
12-27 1万+
首先在app.js中判断是否是哪种设备 globalData: { isIphoneX: false, userInfo: null }, onShow:function(){ let that = this; wx.getSystemInfo({ success: res=&gt;{ // console.log('手机信息res'+res.model) let modelm...
iponeX css兼容处理
weixin_42553179的博客
10-16 165
@media only screen and (device-width:375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) { .loginLink{margin-bottom: 20px} }
iphonex 底部遮挡返回键 解决方法
zhuomox的博客
12-18 6676
只解决底部  positio:fixed   遮挡返回键  iphonex问题  前端开发 iphonex 判断条件 @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-radio: 3) { 写css样式即可解决 } 以下仅供参考：    网
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小麦_gz

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值