iphoneX的safari浏览器操作栏隐藏时兼容底部Home键

黄河爱浪

已于 2022-07-11 10:48:09 修改

阅读量4.6k

点赞数

分类专栏： css 小程序文章标签： iphoneX safari浏览器底部导航 home键

于 2019-08-11 21:11:00 首次发布

本文链接：https://blog.csdn.net/u013350495/article/details/99228848

版权

css 同时被 2 个专栏收录

15 篇文章

订阅专栏

小程序

15 篇文章

订阅专栏

iphoneX系列手机底部都有一个home键（横杠），safari浏览器会在页面滚动时隐藏底部的操作栏，许多应用都有在底部放置导航栏的需求。网上的帖子一般都是通过给底部导航栏元素添加内补34像素来处理，问题能够解决，但是safari浏览器在没有隐藏操作栏时又有影响美观。

iOS特性方法（推荐），小程序也可用

// 底部安全区域
.safe-area-bottom{
    box-sizing: content-box;
    padding-bottom: 0;  
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

作者：黄河爱浪 QQ：1846492969，邮箱：helang.love@qq.com

本文原创，著作权归作者所有，转载请注明原链接及出处。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

黄河爱浪

关注关注

0
点赞
踩
5

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS 网页适配 iPhoneX，就是这么简单

快乐de馒头

01-21

3408

前言 iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。笔者通过查阅了一些官方文档，以及结合实际项目中的一些处理经验，整理了一套简单的适配方案分享给大家，希望对大家有所帮助，以...

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

heyzqt

03-29

6071

最近写小程序时，遇到了 iPhoneX 底部小黑线与内容重叠的问题，实际上是iPhoneX安全区域的适配问题，了解清楚这个问题花了挺多时间的，也实操出了结果，忍不住来总结总结。本文目录前言 · 内容与小黑线重叠情况说明 1.安全区域含义 2.微信小程序适配iPhoneX底部小黑条(Home Indicator) ...

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

怎么像safari一样滑动的时候隐藏navigationbar?

枫岭晚

06-18

1318

navigationController.hidesBarsOnSwipe = Yes

解决IOS引入H5页面Safari浏览器工具栏会遮挡页面底部展示

lucky_ax的博客

02-23

1万+

解决IOS引入H5页面Safari浏览器工具栏会遮挡页面底部展示问题图片展示现在可以看到底部遮住了因为这个项目是IOS和Android共同接入的一套代码，在网上找了一些解决方法后，以下是我的处理放式 //使用计算属性减去底部工具栏的高度 height: calc(100vh - 75px); 完整的解决片段 <div :class="isClass = 'ios' ? 'QYZXIOS' : 'QYZX'"> //此处内容省略 </div> data

iphoneX系列手机在页面滚动时隐藏底部的操作栏

yao_1063066968的博客

09-28

1720

iphoneX系列手机底部都有一个（横杠）键，浏览器会在页面滚动时隐藏底部的操作栏，需求：底部导航栏出现 1、判断是iphonex设备的方法 function isIphoneX(){ if(/iphone/gi.test(window.navigator.userAgent)){ /* iPhone X、iPhone XS */ var x=(window.screen.width === 375 && window.screen.height ==

margin-bottom在safari浏览器失效的问题

weixin_34409822的博客

12-21

349

今天遇到一个bug是底部明明有margin-bottom却无法作用，排查了一下改成用padding可以有效但不找出原因是无法完成这篇博客的问题概要描述：在safari中，当内容高度超出所有父容器时，内容的margin-bottom设置是无效的。解决这个问题的办法也很简单，只要规避这种超出所有父容器的内容即可。父容器不设置高度即可。另外尽量少用html, body {height: 10...

iphone的safari浏览器中实现全屏浏览的方法

09-04

通常，Safari浏览器在浏览网页时会显示顶部的工具栏和底部的标签页栏，这占据了屏幕的一部分空间。全屏浏览则可以隐藏这些元素，使整个屏幕用于显示网页内容。以下是实现这一功能的方法以及与之相关的“Add to Home ...

【实战必备】：小程序&H5页面适配iPhone X底部小黑条的黄金法则（实战案例）

[小程序以及H5页面上IphoneX底部安全区域小黑条适配问题](https://ucc.alicdn.com/pic/developer-ecology/8ab5cd11d33d46eb81cf646331eb7962.png?x-oss-process=image/resize,s_500,m_lfit) # 摘要本文详细介绍了...

vueh5获取浏览器底部安全区高度

热门推荐

BearsG

07-17

6万+

简介在项目中经常碰到首页顶部是无限轮播,需要靠最上面显示.有的设置导航栏为透明等一系列的方法,这个可以借助第三方.或者干脆简单粗暴的直接隐藏掉导航栏.可是push到下一个页面的时候是需要导航栏的,如何做了,这里给出两种方法.第一种做法 -注意这里一定要用动画的方式隐藏导航栏,这样在使用滑动返回手势的时候效果最好,和上面动图一致.这样做有一个缺点就是在切换tabBar的时候有一个导航栏向上消失

html隐藏safari地址栏,怎么隐藏 iOS Safari 打开网页时的地址栏和工具栏探索

weixin_34847426的博客

06-04

5930

先来看一张截图红色框处就是用手机浏览器打开页面时，自动显示出来的头部地址栏和底部工具栏如果现在有一个需求，用手机浏览器打开页面时，把地址栏和工具栏隐藏，该怎么办呢？起初我在度娘找到了好几篇博客都推荐如下方法注：但使用该方法没有效果(可能该属性只针对iOS 7.1 的 Safari 有用)几经波折，我发现并没有直接能够隐藏掉地址栏和工具栏的方法，但有一个折中的方法。手机浏览器打开页面时，地址栏和工...

h5页面在Safari浏览器中高度适配问题

qq_39742704的博客

12-22

2570

在开发H5时，页面高度设置100vh，使用Safari浏览器打开时底部导航会被遮挡，但在微信、app、及其他打开方式中显示正常。

移动端适配

linanran1027的博客

09-17

1506

网页适配 iPhoneX iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。适配之前需要了解几个新知识安全区域安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图蓝色区

ios底部安全距离

杨晓风迷迭香的记忆

03-05

7134

背景：目前公司开发商城小程序，对于iOS要设置底部安全距离，否则底部会被黑条遮挡技术方案： 1、苹果官方推荐：使用env()，constant()来适配，env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量： safe-area-inset-left：安全区域距离左边边界的距离 safe-area-inset-right：安全区域距离右边边界的距离 safe-area...

safari浏览器 底部

03-04

### 自定义或操作 Safari 浏览器底部设置 #### 修改默认搜索引擎通过特定插件如 SafariPlus 可以实现更多自定义功能。例如更改默认搜索引擎，这不仅限于界面顶部而是影响整个浏览器的行为模式。进入 SafariPlus 设置页面，在其中找到“Custom Start Engine”的选项并修改其 URL 值为所偏好的搜索引擎链接[^2]。 #### 调整视窗适应度针对 H5 页面在移动设备上的展示效果不佳的情况，特别是当涉及到安全区域时（如 iPhone X 系列及其之后机型），可以通过 CSS 来调整 `.tab-bar` 的样式属性，确保它能够正确处理屏幕底部的安全边距： ```css .tab-bar { height: calc(50px + env(safe-area-inset-bottom)); /* 对应 iOS >= 11.2 */ padding-bottom: env(safe-area-inset-bottom); } ``` 此代码片段解决了由于不同版本操作系统间差异带来的视觉问题，使得 tab bar 在各种型号手机屏幕上都能良好呈现[^3]。 #### 解决移动端显示异常对于某些情况下网站内容未能完全展现在用户视野内的状况——即所谓的“被截断”，通常是因为开发者采用了基于 `vh` 单位计算高度的方式而导致的不兼容性。为了避免此类现象发生，建议采用相对定位而非绝对百分比单位，并考虑加入额外补偿措施来抵消可能存在的偏差: ```css /* 避免使用 vh 单位直接减去固定像素值 */ height: auto; padding-bottom: 20px; /* 或者其他适当数值 */; ``` 这种方法能有效改善跨平台一致性体验，特别是在像 iPad 这样的平板电脑上浏览网页时更为明显[^4]。 #### 同步多台设备的数据利用 iCloud 服务可以让用户的标签页、书签以及阅读列表等内容无缝衔接至任何已登录相同 Apple ID 的装置之上，从而极大地方便了日常的信息管理和访问效率提升工作[^5]。