Safe Area Simulator

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