Safe Area Simulator

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