Safe Area Simulator

Simulate mobile device safe area insets for web development

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 - 你的移动端适配得力助手