苹果安全区设置

最新推荐文章于 2024-06-14 16:57:03 发布

至_臻

最新推荐文章于 2024-06-14 16:57:03 发布

阅读量298

点赞数 1

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_57163112/article/details/118516023

版权

前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

本文介绍了如何通过在meta头部添加viewport-fit=cover属性以及使用CSS的padding-bottom来实现移动应用的安全区适配，确保内容在不同设备上正确显示，特别是针对iOS设备的屏幕底部安全区域进行了详细的兼容性处理。

摘要由CSDN通过智能技术生成

1：meta头部添加

    <!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"/>

2：在添加安全区的标签里面添加css样式

  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

适配后

适配前

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

至_臻

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
苹果安全区设置

1：meta头部添加  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"/>2：在添加安全区的标签里面添加css样式 padding-bottom
复制链接

扫一扫