移动端安全距离

最新推荐文章于 2025-06-03 11:43:03 发布

喵T陆天凌

最新推荐文章于 2025-06-03 11:43:03 发布

阅读量378

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签：前端 vue vue.js javascript

本文链接：https://blog.csdn.net/shoping110/article/details/130076378

Vue 专栏收录该内容

9 篇文章

订阅专栏

通过在头部添加viewport元标签，确保页面宽度适应设备宽度并保持1:1比例缩放。利用CSS的padding-top和padding-bottom，结合constant(safe-area-inset)和env(safe-area-inset)函数，为iOS和Android设备提供适配屏幕安全区域的底部和顶部间距，实现全面屏适配。

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

1、在头部区域加入如下代码

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

2、写入css样式

body {
  padding-top: constant(safe-area-inset-top);  /* iOS */
  padding-top: env(safe-area-inset-top);        /* Android */
  padding-bottom: constant(safe-area-inset-bottom); /* iOS */
  padding-bottom: env(safe-area-inset-bottom);       /* Android */
}