Safe Area Simulator

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