edgesquare-Edge-2边缘显示模拟器
Edgesquare是一个基于Web的在线模拟器，用于带有Notch或任何其他形式的相机切口的移动边缘到边缘显示器。它可以通过IFRAME加载您的Web应用程序，并让您从许多设备中选择带有状态栏，导航栏，摄像头切口（缺口，孔等）的设备以及其他一些属性。此外，您可以为状态栏和导航栏设置自己的颜色，以尝试一些设计调整。
查看您的Web应用程序在现代智能手机上的真正外观！ ;-)
入门
- 在您的服务器上托管网站，或者简单地转到：https：//byteeteilchen.de/EDGE-2-EDGE/
- 输入Web应用程序的URL（或与Sepia Open Assistant Demo一起玩，这是另一个出色的开源项目^^）
- 从选择器中选择设备
- 根据需要调整颜色
- 在现代手机显示器上查找您的网站/应用程序的样子
已知问题
- 由于设备的定义是其视口尺寸而定义的，而不是其物理尺寸可能比其他设备更大，或者当它们实际上更小（反之亦然）时大小相同。尽管如此，这确实代表了网站或应用程序在特定设备上的空间！使用“设备刻度”切换和缩放系数获取大约。设备的实际尺寸。
- Child应用程序（通过“应用程序URL”启动的应用程序）在父页面的iframe中运行，因此看起来不像移动版本。这取决于儿童应用程序对浏览器“用户代理”和视口缩放的反应。
- 如果您需要模拟移动浏览器的其他“用户代理”，则可以使用此Sepia开源浏览器扩展程序作为Chrome：Sepia Framework工具或浏览器的开发人员工具;-)
- HTML Meta属性“主题色”被忽略（在iframe内部的一般数据中，未移交给父母）。
屏幕截图
许可证
该项目是根据MIT开源许可证获得许可的。它用香草JS编写，仅包含很少的依赖项：
- pickr-可行的跨浏览器的彩色选择器 - 麻省理工学院许可证
- SVG注射 - 创建可划分的SVG图像的工具 - 麻省理工学院许可证
- Google材料图标的Web字体-Apache许可证版本2.0版本
- 简单图标项目的一些SVG图标-CC0 1.0通用许可证
