Safari浏览器内容被地址栏、菜单栏或工具栏遮挡导致的兼容问题

Safari浏览器内容被地址栏、菜单栏或工具栏遮挡导致的兼容问题

最近写了一个网页,页面很多元素使用的是Fixed定位,当在手机端的Safari浏览器、安卓浏览器等测试时,会出现顶部元素、底部元素 被地址栏、菜单栏或工具栏遮挡的情况。于是,我查阅了相关资料,发现了一些解决方案,在iOS设备上使用Safari浏览器时,开发者经常会遇到内容被地址栏、菜单栏或工具栏遮挡的问题。本文将探讨如何使用 viewport-fit 属性和CSS的 env() 函数来解决这些问题。

viewport-fit属性

viewport-fit 属性是iOS Safari 13.4+ 引入的新属性,它可以用来控制页面内容的缩放行为。

• viewport-fit=cover:内容会被充满整个视窗,即内容不会被裁剪,但可能会被拉伸。
• viewport-fit=contain:内容会被缩放,以适应视窗的大小,但不会被裁剪。
• viewport-fit=auto:默认值,内容会根据设备的方向和大小进行缩放,以适应视窗的大小。

<meta name="viewport" content="viewport-fit=cover" />

有无安全距离100vh的视口大小

Safari浏览器内容被地址栏、菜单栏或工具栏遮挡导致的兼容问题

由于 vh 代表的是视口大小的高度,而在ios的Safari浏览器中,地址栏和菜单栏/工具栏也是属于视口的一部分,所以会导致有测试的时候ios14及以上的手机打开页面时,页面会出现少了一部分的情况,这种情况往往是设计之初就没有考虑到兼容问题导致的,在项目即将完成的时候,你可以通过以下代码来解决

/* 方案1:这种方案虽然有效,但是由于不同页面的类名不同,需要构建多套代码 */
padding-top: env(safe-area-inset-top, 0px);
/* 方案2:将你的高设置为内容的100%减去安全区域的距离即可,这种对我写的这个项目代码量最少,效果还不错的方案了 */
height: calc(100% - env(safe-area-inset-top, 0px));

CSS的 env() 函数

CSS的 env() 函数可以用来动态获取环境变量,例如设备的宽度、高度、分辨率等。H5网页设置viewport-fit=cover的时候才生效,小程序里的viewport-fit默认是cover。

safe-area-inset-top、safe-area-inset-right、safe-area-inset-bottom、safe-area-inset-left 是四个环境变量,它们的值代表了设备的安全区域距离屏幕边缘的距离。

• safe-area-inset-left:安全区域距离左边边界的距离
• safe-area-inset-right:安全区域距离右边边界的距离
• safe-area-inset-top:安全区域距离顶部边界的距离
• safe-area-inset-bottom:安全区域距离底部边界的距离

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  /* 等价于 */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

兼容方案

为了兼容不同的设备,我们可以根据设备的安全区域距离屏幕边缘的距离来设置不同的 padding 值。

body {
  padding: 0;
}

/* 在竖屏模式下,我们设置 `padding-top` 和 `padding-bottom` 为 `env(safe-area-inset-top)` 和 `env(safe-area-inset-bottom)` 的值,以达到内容不被地址栏、菜单栏或工具栏遮挡的效果。 */
@media (orientation: portrait) {
  body {
    /* 当屏幕方向为竖屏时应用的样式 */
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) 0;
  }
}

/* 在横屏模式下,我们设置 `padding-left` 和 `padding-right` 为 `env(safe-area-inset-left)` 和 `env(safe-area-inset-right)` 的值,以达到内容不被地址栏、菜单栏或工具栏遮挡的效果。 */
@media (orientation: landscape) {
  /* 当屏幕方向为横屏时应用的样式 */
  body {
    padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  }
}

转载作品,原作者:???,文章来源:https://www.vvhan.com/article/ios-safari-safe-padding.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2024-11-27 10:36
下一篇 2024-11-27 16:44

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部