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

