Safe Area Simulator

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