EDGESQUARE-Simulator Tampilan Edge-2-Edge
EDGESQUARE adalah simulator online berbasis web untuk tampilan seluler ke tepi dengan takik atau bentuk pemotongan kamera lainnya. Ini dapat memuat aplikasi web Anda melalui iframe dan memungkinkan Anda memilih dari sejumlah perangkat dengan preset untuk bilah status, bilah navigasi, pemotongan kamera (takik, lubang, dll.) Dan beberapa properti lainnya. Selain itu, Anda dapat mengatur warna Anda sendiri untuk bilah status dan bilah navigasi untuk mencoba beberapa tweak desain.
Lihatlah bagaimana aplikasi web Anda benar -benar terlihat di smartphone modern! ;-)
Memulai
- Host situs web di server Anda atau cukup kunjungi: https://byteteilchen.de/edge-2-gede/
- Masukkan URL aplikasi web Anda (atau bermain-main dengan Demo Asisten Terbuka Sepia, proyek open-source yang hebat ^^)
- Pilih perangkat dari pemilih
- Sesuaikan warna sesuai kebutuhan
- Temukan bagaimana situs web/aplikasi Anda terlihat di layar ponsel modern
Masalah yang diketahui
- Karena perangkat ditentukan oleh ukuran viewport mereka dan bukan ukuran fisiknya, beberapa mungkin tampak lebih besar dari yang lain atau ukurannya identik ketika mereka sebenarnya lebih kecil (atau sebaliknya). Namun demikian ini mewakili ruang yang akan dimiliki oleh situs web atau aplikasi pada perangkat tertentu! Gunakan faktor 'skala perangkat' dan faktor penskalaan untuk mendapatkan kira -kira. Ukuran perangkat nyata.
- Aplikasi Child (aplikasi dimulai melalui 'Aplikasi URL') berjalan di iframe dari halaman induk dan oleh karena itu mungkin tidak terlihat persis seperti versi seluler. Ini tergantung pada bagaimana aplikasi anak bereaksi terhadap browser 'agen pengguna' dan penskalaan viewport.
- Jika Anda perlu mensimulasikan 'agen pengguna' yang berbeda dari browser seluler, Anda dapat menggunakan ekstensi browser open-source sepia ini untuk Chrome: Sepia Framework Tools atau alat pengembang browser Anda ;-)
- Properti meta html 'warna tema' diabaikan (dalam data umum dari dalam iframe tidak diserahkan ke induk).
Tangkapan layar
Lisensi
Proyek ini dilisensikan di bawah lisensi open-source MIT. Itu ditulis dalam vanilla js dan hanya mencakup sangat sedikit dependensi:
- Pickr - Pemilih Warna yang bekerja lintas -browser - Lisensi MIT
- SVG Inject - Alat untuk membuat gambar SVG yang dapat ditata - Lisensi MIT
- Font Web dari Google Material Ikon - Lisensi Apache Versi 2.0
- Beberapa ikon SVG dari Proyek Ikon Sederhana - CC0 1.0 Lisensi Universal
