Всем привет. В этом посту я хотел бы написать о небольшом боковом проекте, который я работал на несколько дней. Это симулятор для мобильных телефонов онлайн-устройства для мобильных телефонов, которые имеют кромки к краю и/или выемки (как в основном любой новый телефон в наши дни):
https://byteteilchen.de/edge-2-edge/
Почему?
Если вам нравится проектировать веб-сайты или мобильные приложения, подобные мной, подобные мной, вы, вероятно, используете предварительный просмотр устройства, интегрированные в ваш любимый браузер много (F12 -> Ctrl + Shift + M). Во многих случаях он делает довольно хорошую работу, особенно потому, что она изменяет пользовательский агент браузера, чтобы убедиться, что веб-серверы будут служить мобильной версии страницы (и она эмулирует сенсорные элементы управления … вроде). То, что я никогда не понимал, было … Почему он поддерживает только простые квадратные экраны Пока в основном все новые телефоны, поскольку iPhone X имеют какой-то экологический дизайн с вырезом камеры (AKA Notch) и круглыми краями? Однажды, когда я работал над одним из моих приложений и хотел попробовать новые цвета для статуса и навигационного бара, я получил так раздраженно (снова), потому что не было простого способа сделать это: -/. Я не хотел начинать один из тех эмуляторов устройств тяжелого веса от Xcode или Android Studio и т. Д. И у меня не было настоящего устройства для тестирования … Поэтому я попробовал веб-поиск … и потерпел неудачу. Может быть, я не смотрел в нужных местах, может быть, я что-то пропустил (пожалуйста, прокомментируйте, если знаете какие-либо хорошие онлайн-инструменты), но я застрял И поэтому я решил, что пришло время построить свой собственный инструмент!
Что оно делает?
В основном это веб-сайт, который может открыть свое собственное приложение (например, http://localhost: 9000/index.html или любой локальный/общественный URL) в iframe, рисует форму экрана определенного устройства вокруг него и ставит Нотач и некоторые значки, такие как WiFi или батарея сверху. Вы можете выбрать несколько популярных устройств из списка (Samsung S10, iPhone X/XR/11/6, Google Pixel и т. Д.) И симулятор установит правильный размер в соответствии с доступными пикселями экрана, а не «реального» разрешения) Отказ Это не Pixel идеально Но я думаю, что я получил довольно близко к настоящему внешности 😎.
Что еще?
Существуют дополнительные элементы управления для изменения формата отображения, вскакивают устройство к его физическому размеру (включая некоторый фактор, чтобы отрегулировать его на ваш монитор) и изменять цвета статуса и навигации цвета с помощью цветов. Я приглашаю вас играть с ним, его довольно весело! 😊. Вот пример, где я редактирую один из моих приложений:
То, что я узнал
Знаете ли вы, что Samsung S10 и S10E на самом деле имеют то же самое одинаковую просмотр в то же время, имея симпатичные взгляды? Взаимодействие просмотра, разрешения и фактического размера устройства иногда может быть очень удивительным! Также: может быть довольно трудно узнать правильные значения для просмотра просмотра (некоторые онлайн данные на самом деле просто неправильно OO).
И сейчас?
Не стесняйтесь использовать его, поделитесь им, скопируйте его, измените его, что угодно, все открыто источника и Доступно на Github Отказ Я, вероятно, не напишу какие-либо учебные пособия о том, как добавить новые устройства к коду, но это не должно быть трудно выяснить. Если вы сделаете, пожалуйста, отправьте запрос на тягу! 😉
Развлекайся! Флориан
Оригинал: “https://dev.to/fquirin/online-device-simulator-for-edge-to-edge-displays-1a3b”