Edgesquare-エッジ2エッジディスプレイシミュレーター
Edgesquareは、Notchまたはその他の形式のカメラの切り抜きを備えたモバイルエッジツーエッジディスプレイ用のWebベースのオンラインシミュレーターです。 IFRAME経由でWebアプリをロードでき、ステータスバー、ナビゲーションバー、カメラの切り抜き(ノッチ、穴など)のプリセットを備えた多くのデバイスから選択できます。さらに、ステータスバーとナビゲーションバーに独自の色を設定して、デザインの調整を試すことができます。
あなたのWebアプリケーションが実際に現代のスマートフォンでどのように見えるかをチェックしてください! ;-)
はじめる
- サーバーでウェブサイトをホストするか、https://byteteilchen.de/edge-2-edge/にアクセスしてください
- WebアプリケーションのURLを入力します(または、Sepia Open Assistant Demo、もう1つの優れたオープンソースプロジェクトをプレイしてください^^)
- セレクターからデバイスを選択します
- 必要に応じて色を調整します
- あなたのウェブサイト/アプリが最新の携帯電話ディスプレイでどのように見えるかを発見してください
既知の問題
- デバイスはビューポートサイズで定義されており、物理サイズではなく、他のサイズよりも大きく見えるか、実際に小さい場合にサイズが同一に見える場合があります(または逆も同様です)。それにもかかわらず、これはウェブサイトまたはアプリが特定のデバイスに備えたスペースを表しています! 「デバイススケール」トグルとスケーリングファクターを使用して、約を取得します。デバイスの実際のサイズ。
- 子アプリ(アプリは「App URL」を介して開始)は、親ページのiframeで実行されるため、モバイルバージョンのようには見えない場合があります。これは、子供アプリがブラウザの「ユーザーエージェント」とビューポートスケーリングにどのように反応するかに依存します。
- モバイルブラウザの別の「ユーザーエージェント」をシミュレートする必要がある場合は、このSepia Open-Source Browser拡張機能を使用できます。
- HTMLメタプロパティ「テーマカラー」は無視されます(一般に、IFRAME内からのデータは親に引き渡されません)。
スクリーンショット

ライセンス
このプロジェクトは、MITオープンソースライセンスの下でライセンスされています。バニラJSで書かれており、依存関係が非常に少ないだけです。
- pickr-クロスブラウザーに動作するカラーピッカー-MITライセンス
- svg -inject-様式可能なSVG画像を作成するツール-MITライセンス
- GoogleマテリアルアイコンからのWebフォント-Apacheライセンスバージョン2.0
- SimpleアイコンプロジェクトからのSVGアイコン-CC0 1.0ユニバーサルライセンス