Edgesquare-симулятор дисплея Edge-2-края
Edgesquare-это веб-симулятор для мобильных дисплеев с ноткой или любой другой формой выреза для камеры. Он может загрузить ваше веб-приложение через iframe и позволить вам выбирать из ряда устройств с пресетами для строки состояния, навигационной панели, выреза для камеры (выемки, отверстия и т. Д.) И некоторые другие свойства. Кроме того, вы можете установить свои собственные цвета для панели статуса и навигационной панели, чтобы попробовать некоторые настройки дизайна.
Посмотрите, как ваше веб -приложение действительно выглядит на современных смартфонах! ;-)
Начиная
- Размещайте веб-сайт на вашем сервере или просто перейдите по адресу: https://byteteilchen.de/edge-2-edge/
- Введите URL-адрес вашего веб-приложения (или играйте с демоверсией Sepia Open Assistant, еще одним отличным проектом с открытым исходным кодом ^^)
- Выберите устройство из селектора
- При необходимости отрегулировать цвета
- Узнайте, как выглядит ваш сайт/приложение на современном дисплее мобильного телефона
Известные проблемы
- Поскольку устройства определяются размером их просмотра, а не их физическим размером, некоторые могут казаться больше, чем другие или идентичные по размеру, когда они на самом деле меньше (или наоборот). Тем не менее, это представляет пространство, которое веб -сайт или приложение будет иметь на определенном устройстве! Используйте переключение и масштабирование «Шкала устройства», чтобы получить ок. Реальный размер устройства.
- Приложение для детей (приложение запустилось через «URL -адрес») работает в iframe на родительской странице, и поэтому оно может выглядеть не так же, как мобильная версия. Это зависит от того, как дочернее приложение реагирует на браузер «пользователь-агент» и масштабирование Viewport.
- Если вам нужно моделировать другой «агент пользовательского агента», например мобильный браузер, вы можете использовать это расширение браузера с открытым исходным кодом Sepia для Chrome: Sepia Framework Tools или инструменты разработчика вашего браузера ;-)
- HTML Meta Property «Theme-Color» игнорируется (в целом данные изнутри IFRAME не передаются родителю).
Скриншоты
Лицензии
Этот проект лицензирован по лицензии с открытым исходным кодом MIT. Он написан в Vanilla JS и включает только очень мало зависимостей:
- Pickr - цветовой сборщик, который работает Cross -Browser - MIT Лицензия
- SVG -Inject - Инструмент для создания стильных изображений SVG - лицензия MIT
- Веб -шрифты из значков материалов Google - Apache License Version 2.0
- Некоторые значки SVG из проекта Simple Icons - Universal License CC0 1.0
