Safe Area Simulator

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