ios底部小横条高度适配

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover">
    <title>ios底部小横条高度适配</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            background-color: pink;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed !important;
            width: 100vw;
            height: 50px;
            z-index: 100;
            background-color: blue;
            bottom: constant(safe-area-inset-bottom) !important; /* 兼容 iOS < 11.2 */
            bottom: env(safe-area-inset-bottom) !important; /*兼容 IOS >= 11.2*/
        }

        .bottom {
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed !important;
            bottom: 0;
            background-color: red;
            width: 100vw;
            height: constant(safe-area-inset-bottom) !important;
            height: env(safe-area-inset-bottom) !important;
        }
    </style>
    <script>
        // 使用js去设置meta标签(本人在做海报项目时是直接把下面属性写到meta标签中的,但是没效果,放到这个js里面动态设置就好了,海报项目是vue3+vite)
        // 在当前示例里面,注释掉下面的js也没问题,具体原因未知,如果各位设置meta没效果的话可以尝试一下这个属性
        (document.getElementsByName('viewport')[0]).content =
            'user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover';
    </script>
</head>

<body>
    <div class="container"> 我是内容区域 </div>
    <div class="bottom">我是距离底部的高度模块</div>
</body>

</html>
相关推荐
呆呆的心6 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
AA-代码批发V哥7 小时前
CSS之布局详解指南
css
拾光拾趣录10 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
FogLetter10 小时前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
FogLetter10 小时前
前端性能优化:深入理解回流与重绘
前端·css
浪裡遊12 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
拾光拾趣录13 小时前
CSS全面指南:从基础布局到高级技巧与实践
前端·css
Codebee14 小时前
OneCode图生代码技术深度解析:从可视化设计到注解驱动实现的全链路架构
css·人工智能·算法
zhanshuo14 小时前
i18next + 原生JS 双引擎:打造前端多语言系统最佳实践
前端·javascript·css
十盒半价14 小时前
前端性能优化避坑指南:从回流重绘到页面渲染全解析
前端·css·trae