Safe Area Simulator

    页面会立即显示安全区域覆盖层 - 顶部css变量名 顶部安全区域像素值 variable // css变量使用 / 🎨 } 14 pixel / 自定义安全区域 left / 轻量级，对页面性能影响微乎其微 my-safe-top 支持30+主流移动设备 pro   padding-right: right .safe-area-inset-all  适合前端开发者、ui设计师使用 scripting - } --safe-area-inset-left: iphone 无数据收集: - popup中的3d设备模型预览 0px; web padding-bottom: padding-top:   最新设备: - 支持版本: 14 bottom /*   .safe-area-inset-left  13   核心功能 -   开源透明: - /     切换硬件区域:     工具类支持: } spa兼容: 基础使用 生成的css： variables"应用 自定义css变量名: 🚀 欢迎提出新设备支持请求 top,     2. 添加顶部padding   pro bottom, 0px; 切换设备外框: - s21 => --- simulator 灵活控制:   支持输入任意安全区域数值 从下拉菜单选择目标设备 const pro pro safe 2. 问题报告:   15系列、samsung - iphone var(--safe-area-inset-right, -   提供.safe-area-inset-*实用css类 界面说明 chrome 快速开始 📱 硬件区域真实渲染 my-safe-left 🔧   代码逻辑清晰可审查       v1.0.0 点击toggle开关启用safe (manifest galaxy 你的移动端适配得力助手   = activetab, iphone - 0)); - --my-safe-right: /     添加左侧padding 1.     开启扩展并选择要模拟的设备 -     max   pro right, 功能建议: 下拉菜单选择模拟设备   }); left,   根据变化更新你的应用布局   - 🎛️   1. 🎨 30+种设备支持: 自定义配置 variable - -   ✨   :root 性能影响: pro env(safe-area-inset-left, { top var(--safe-area-inset-bottom, .safe-area-inset-bottom  - variable 4 - } galaxy   - }); 设备模拟 - - /   max / 技术规格   输入你的变量名（不含--前缀） extension 📱 左侧安全区域像素值 左侧css变量名 -   🛠️ name:   / - variable     启用扩展: --safe-area-inset-top: } 主控制面板 47px; island、导航栏显示   如果你的项目已经使用了不同的css变量命名： { 展开"custom bottom, variable max --my-safe-top: 选择设备:   开发交流:   / 设备预览区   -     name:   34px;     { google .safe-area-inset-top  document.addeventlistener('safeareainsetschanged', left, variable   真实的刘海屏、dynamic - x names"设置 📝 可配置css变量名称以适配现有项目 -   right 添加底部padding   支持的设备 s22 css变量注入: area xl (横屏) /* {   javascript事件监听   自定义css变量名 - 🖼️ 事件通知: name: 11   仅使用必要的activetab权限 显示/隐藏粉色调试覆盖层 包含iphone   store安装扩展 env(safe-area-inset-bottom, - chrome 在css中使用 底部css变量名 var(--safe-area-inset-top, 47px; 支持与反馈 (px):       实时显示当前安全区域数值   area simulator   area)。帮助开发者轻松测试和调试web应用在各种移动设备上的显示效果，确保内容不被设备的硬件特征遮挡。       高级设置 top (横屏) 📱 标准版   name:   - 点击浏览器工具栏中的扩展图标     - 🔍   ✨   3   android系列 /* 设备选择: */   iphone - 🔧 - 让移动端web开发更简单！ 右侧css变量名 可视化调试   enabled   更新日志 从chrome --my-safe-bottom: xl 📞 bottom 安装     查看效果:     {   name: 可视化安全区域调试覆盖层   概述 🚀 自定义尺寸: */ 💻 iphone系列 0px; -   通过chrome { 设备预览: .header     name: area     --safe-area-inset-right:     --safe-area-inset-bottom: 开发者友好       4. mini   添加全方向padding / css   -   */ my-safe-right 4. - 标准版   基于官方规格的真实安全区域数值 0px; 34px; 实时预览: 不收集任何用户数据或浏览记录         .sidebar 15 simulator   使用控制按钮自定义显示选项 max 涵盖主流iphone、android设备 pro { event.detail; 硬件渲染:     高度自定义 safe area 最小权限: iphone   标准版 right, - 扩展会自动在页面中注入以下css变量： 调整设置: ⚙️ name: 是一款专为web开发者设计的chrome扩展，用于在桌面浏览器中精确模拟移动设备的安全区域(safe 示例配置： /*     - 本地运行: .footer 标准版       / - css /     -   (px): /           - --my-safe-left: 支持单页应用的路由变化检测   env(safe-area-inset-right, iphone ⚙️   📖   - variable   修改css变量名 精确数据:     - - samsung variable s22等最新机型 启用/禁用扩展功能 my-safe-bottom (event) 显示/隐藏预览设备的内容区域 area enable开关: 1.   粉色半透明覆盖层显示安全区域边界 v3) 显示/隐藏完整设备外观 :root   left   - 底部安全区域像素值 3.     web   横屏模式 iphone top,   */ 切换内容: (px): 🌟 3d设备预览界面 safe     权限要求: enabled 显示/隐藏刘海屏等硬件特征     0)); / ⚙️ {     (px): bottom right 隐私与安全 */   }     🎨   spa路由变化检测 右侧安全区域像素值 -       2. 88+ - 添加右侧padding 自定义css变量名功能 console.log('safe pro     独立控制各个显示元素的开关 name: - iphone   pro - (当前版本) 开发者指南   .safe-area-inset-right  扩展还提供了预定义的css类： 点击"apply variable 12 专业的移动设备安全区域模拟工具，为web开发者打造 /   simulator xr store反馈 数值显示:   自动注入--safe-area-inset-*变量 /* 便捷css类 🔒   mini 派发safeareainsetschanged自定义事件 所有功能在浏览器本地执行 ~330kb 3. storage,   3. - xs top   padding-left:     🖼️ 扩展会使用你自定义的变量名 env(safe-area-inset-top,   var(--safe-area-inset-left, 🎯       切换安全区域: 0)); 14 0)); 文件大小:       - changed:',   left