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通用許可證
