Safe Area Simulator

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