Safe Area Simulator

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