Safe Area Simulator

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