Safe Area Simulator

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