移动端页面底部安全距离样式设置_移动端底部横条边距

作者：小小林熬夜学编程 | 2024-04-18 22:39:22

踩

移动端底部横条边距

移动端页面，如iPhoneX iPhone11等手机，页面底部会有个操作条，影响页面操作。我们可以留有一个安全距离。但是移动端设置margin-bottom是默认无效的。此时需要进行额外的配置。

首先，在index.html的meta标签设置 viewport-fit=cover,user-scalable=no ：

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

接着给body设置样式：


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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/448601