Safe Area Simulator

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