给X系列手机设置安全区域

最新推荐文章于 2024-08-30 21:59:08 发布

花有重开时，人无再少年

最新推荐文章于 2024-08-30 21:59:08 发布

阅读量277

点赞数 1

分类专栏：前端文章标签： css3 html

本文链接：https://blog.csdn.net/Anyway_han/article/details/124321703

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何通过在meta标签中设置`viewport-fit=cover`来实现移动设备的全屏适配，并结合CSS的`calc()`函数和`env(safe-area-inset-bottom)`来确保内容在屏幕安全区域内正确显示，避免被刘海屏等设备的硬件边框遮挡。

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

添加meta标签【viewport-fit的值为cover】

<meta name="viewport" content="width=device-width,initial-scale=1.0, viewport-fit=cover">

<div id="nav">
    视图区域
</div>

body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

#nav {
  width: 100vw;
  background-color: pink;
  overflow: auto;
  height: calc(100vh - env(safe-area-inset-bottom));
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

花有重开时，人无再少年

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
给X系列手机设置安全区域

添加meta标签【viewport-fit的值为cover】<meta name="viewport" content="width=device-width,initial-scale=1.0, viewport-fit=cover"><div id="nav"> 视图区域</div>body { padding: 0; margin: 0; height: 100%; width: 100%;}#nav { width.
复制链接

扫一扫