У меня есть веб-сайт, который в основном будет использоваться для больших мониторов на рабочем столе. Внутри страницы у меня будут разные разделы контента, но я также хочу иметь область мобильного приложения в div, которая будет отображаться для пользователя, как элементы в мобильном приложении могут выглядеть по-разному на разных мобильных телефонах. Глядя на спецификации некоторых телефонов, я вижу:
- iPhone 7 (4,7 дюйма) - 1,334 x 750 пикселей (326 точек на дюйм)
- iPhone 7 (5,5 дюйма) - 1,920 x 1080 пикселей (401 точек на дюйм)
- Samsung Galaxy S7 - 2,560 x 1440 пикселей (577 точек на дюйм)
Очевидно, что ppi отличается от настольного дисплея, чем для мобильного телефона.
Какой был бы лучший способ имитировать, как все будет выглядеть и позиционироваться на мобильном телефоне? Будет ли только относительное отношение длины и высоты и игнорирование работы ppi?
Заметка
Я знаком с инструментами разработчика Chrome. Это не то, о чем я прошу. Раздел мобильного приложения должен быть в div на странице. Это не должно занять всю мою страницу и сделать это похожим на мобильное приложение.
Он также должен быть чем-то прозрачным для пользователя, поэтому им не нужно разбираться в том, как использовать инструмент разработчика.