Safe Area Simulator

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