Safe Area Simulator

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