Safe Area Simulator

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