CRX id
ihdgngdocppoadcelpjcccldfcmbhand
ihdgngdocppoadcelpjcccldfcmbhand
Description from extension meta
Simulate mobile device safe area insets for web development
Image from store
Description from store
Safe Area Simulator - Chrome Extension
🚀 专业的移动设备安全区域模拟工具，为Web开发者打造
📖 概述
Safe Area Simulator 是一款专为Web开发者设计的Chrome扩展，用于在桌面浏览器中精确模拟移动设备的安全区域(Safe
Area)。帮助开发者轻松测试和调试Web应用在各种移动设备上的显示效果，确保内容不被设备的硬件特征遮挡。
✨ 核心功能
🎯 设备模拟
- 30+种设备支持: 涵盖主流iPhone、Android设备
- 精确数据: 基于官方规格的真实安全区域数值
- 最新设备: 包含iPhone 15系列、Samsung Galaxy S22等最新机型
🎨 可视化调试
- 实时预览: 粉色半透明覆盖层显示安全区域边界
- 设备预览: popup中的3D设备模型预览
- 硬件渲染: 真实的刘海屏、Dynamic Island、导航栏显示
⚙️ 高度自定义
- 自定义尺寸: 支持输入任意安全区域数值
- 自定义CSS变量名: 可配置CSS变量名称以适配现有项目
- 灵活控制: 独立控制各个显示元素的开关
🔧 开发者友好
- CSS变量注入: 自动注入--safe-area-inset-*变量
- 工具类支持: 提供.safe-area-inset-*实用CSS类
- 事件通知: 派发safeAreaInsetsChanged自定义事件
- SPA兼容: 支持单页应用的路由变化检测
🚀 快速开始
安装
1. 从Chrome Web Store安装扩展
2. 点击浏览器工具栏中的扩展图标
3. 开启扩展并选择要模拟的设备
基础使用
1. 启用扩展: 点击toggle开关启用Safe Area Simulator
2. 选择设备: 从下拉菜单选择目标设备
3. 查看效果: 页面会立即显示安全区域覆盖层
4. 调整设置: 使用控制按钮自定义显示选项
📱 支持的设备
iPhone系列
- iPhone 15 Pro Max / Pro / 标准版
- iPhone 14 Pro Max / Pro / 标准版
- iPhone 13 Pro Max / Pro / 标准版 / Mini
- iPhone 12 Pro Max / Pro / 标准版 / Mini
- iPhone XR / 11
- iPhone X / XS
Android系列
- Samsung Galaxy S22 / S21
- Google Pixel 4 / 3 XL / XL
横屏模式
- iPhone 14 Pro (横屏)
- iPhone 14 (横屏)
🎛️ 界面说明
主控制面板
- Enable开关: 启用/禁用扩展功能
- 设备选择: 下拉菜单选择模拟设备
- 数值显示: 实时显示当前安全区域数值
设备预览区
- 🔍 切换安全区域: 显示/隐藏粉色调试覆盖层
- 📱 切换内容: 显示/隐藏预览设备的内容区域
- 🖼️ 切换设备外框: 显示/隐藏完整设备外观
- ⚙️ 切换硬件区域: 显示/隐藏刘海屏等硬件特征
高级设置
自定义安全区域
Top (px): 顶部安全区域像素值
Bottom (px): 底部安全区域像素值
Left (px): 左侧安全区域像素值
Right (px): 右侧安全区域像素值
自定义CSS变量名
Top variable name: 顶部CSS变量名
Bottom variable name: 底部CSS变量名
Left variable name: 左侧CSS变量名
Right variable name: 右侧CSS变量名
💻 开发者指南
CSS变量使用
扩展会自动在页面中注入以下CSS变量：
:root {
--safe-area-inset-top: 47px;
--safe-area-inset-bottom: 34px;
--safe-area-inset-left: 0px;
--safe-area-inset-right: 0px;
}
在CSS中使用
.header {
padding-top: env(safe-area-inset-top, var(--safe-area-inset-top, 0));
}
.footer {
padding-bottom: env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0));
}
.sidebar {
padding-left: env(safe-area-inset-left, var(--safe-area-inset-left, 0));
padding-right: env(safe-area-inset-right, var(--safe-area-inset-right, 0));
}
便捷CSS类
扩展还提供了预定义的CSS类：
.safe-area-inset-top /* 添加顶部padding */
.safe-area-inset-bottom /* 添加底部padding */
.safe-area-inset-left /* 添加左侧padding */
.safe-area-inset-right /* 添加右侧padding */
.safe-area-inset-all /* 添加全方向padding */
JavaScript事件监听
document.addEventListener('safeAreaInsetsChanged', (event) => {
const { top, bottom, left, right, enabled } = event.detail;
console.log('Safe area changed:', { top, bottom, left, right, enabled });
// 根据变化更新你的应用布局
});
🎨 自定义配置
修改CSS变量名
如果你的项目已经使用了不同的CSS变量命名：
1. 展开"Custom CSS Variable Names"设置
2. 输入你的变量名（不含--前缀）
3. 点击"Apply CSS Variables"应用
4. 扩展会使用你自定义的变量名
示例配置：
Top variable name: my-safe-top
Bottom variable name: my-safe-bottom
Left variable name: my-safe-left
Right variable name: my-safe-right
生成的CSS：
:root {
--my-safe-top: 47px;
--my-safe-bottom: 34px;
--my-safe-left: 0px;
--my-safe-right: 0px;
}
🔒 隐私与安全
- 本地运行: 所有功能在浏览器本地执行
- 无数据收集: 不收集任何用户数据或浏览记录
- 最小权限: 仅使用必要的activeTab权限
- 开源透明: 代码逻辑清晰可审查
🛠️ 技术规格
- 权限要求: activeTab, storage, scripting
- 支持版本: Chrome 88+ (Manifest V3)
- 文件大小: ~330KB
- 性能影响: 轻量级，对页面性能影响微乎其微
📞 支持与反馈
- 问题报告: 通过Chrome Web Store反馈
- 功能建议: 欢迎提出新设备支持请求
- 开发交流: 适合前端开发者、UI设计师使用
📝 更新日志
v1.0.0 (当前版本)
- ✨ 支持30+主流移动设备
- 🎨 可视化安全区域调试覆盖层
- ⚙️ 自定义CSS变量名功能
- 🖼️ 3D设备预览界面
- 🔧 硬件区域真实渲染
- 📱 SPA路由变化检测
---
🌟 让移动端Web开发更简单！
Safe Area Simulator - 你的移动端适配得力助手
Statistics
Installs
2
history
Category
Rating
0.0 (0 votes)
Last update / version
2025-07-25 / 1.0.0
Listing languages
en