Safe Area Simulator

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