Safe Area Simulator

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