Имитация мобильного разрешения в разделе веб-страницы

У меня есть веб-сайт, который в основном будет использоваться для больших мониторов на рабочем столе. Внутри страницы у меня будут разные разделы контента, но я также хочу иметь область мобильного приложения в 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 на странице. Это не должно занять всю мою страницу и сделать это похожим на мобильное приложение.

Он также должен быть чем-то прозрачным для пользователя, поэтому им не нужно разбираться в том, как использовать инструмент разработчика.

Ответ 1

Вы не можете установить параметры DPI на любом из веб-языков (HTML/CSS/JS). Но что касается симуляции, вы можете поместить код в iframe или даже div, а затем загрузить свой сайт внутри iframe, а затем вы можете использовать CSS transform:scale() для масштабирования всей страницы в зависимости от вашего PPI мобильного телефона.

Как вы видите, например, iPhone6s имеет 750 x 1334 Native Resolution (Pixels), но 375 x 667 UIKit Size (Points) и коэффициент Native Scale 2.0. Вы также можете увидеть в CSS Media Queries, он отображает 375 x 667, а затем масштабирует его с помощью собственного фактора (здесь 2.0), чтобы он соответствовал дисплею устройства (это вызывает мягкий сглаженный подобный эффект между этой операцией).

А теперь, чтобы имитировать экран с 326 PPI для iPhone6s в моем ИМАК 27" 2012 с очевидно 108.79 PPI (обычно может быть 96), у меня есть еще один масштаб с коэффициентом 108.79/326 Таким образом, окончательный масштабный коэффициент, который мы бы применить с. transform:scale:

with iframe of 375 x 667 pixels size 
108.79/326 * 2.0 = 0.667 : as scale factor

так:

.iPhone6S {
  /* this is the render are dimension */
  /* media queries look up to this */
  width:375px;
  height:667px;
  transform-origin: 0 0;
  transform:scale(0.67); 
  /* you can calculate it by something like : 
     108/326*2 = 0.663 => 0.67*/
  /* zoom:...; */ /* This is non-standard feature */
                  /* FireFox and Opera don't support it */
}

<iframe src="https://www.w3schools.com/" class="iPhone6S"></iframe>

Также из w3.org по ориентации

"Ориентировочный носитель" - это портрет, когда значение "медиаплеера" больше или равно значению "ширины носителя". В противном случае "ориентация" - это пейзаж.

Если это общий симулятор, о котором мы говорим, тогда вы должны рассмотреть обнаружение устройства пользователя-агента, которое все еще может полагаться на него на стороне сервера или клиента. Итак, вам нужно будет вручную загрузить страницу с помощью XMLHTTPRequest а затем установить пользовательский агент с XMLHTTPRequest.setRequestHeader на какой-то телефон устройства, похожий на

Вот пример строки user-agent iPhone6s:

Mozilla/5.0 (iPhone, процессор iPhone OS 6_1_3, как Mac OS X) AppleWebKit/536.26 (KHTML, например, Gecko) Версия /6.0 Mobile/10B329 Safari/8536.25

Также я наткнулся на этот сайт, который действительно стоит упомянуть: https://www.mydevice.io/

Ответ 2

Используйте следующую процедуру для моделирования различных дисплеев.

1.Права Нажмите в хроме и выбрано инспектировать

2.Выберите панель инструментов переключателя

3.Выберите нужный дисплей

4. После выбора отображения нажмите "Ctrl + F5" для страницы обновления.

Ответ 3

Я знаком с веб-приложениями, поэтому ответ будет сосредоточен на этом.

Стиль приложения, связанный с размером экрана, обычно зависит от:

Отношение ширины/высоты устройства.
Ширина/высота экрана, сообщенная устройством из-за свойств стиля, заданных в запросах на медиа или через javascript. Обратите внимание, что на мобильных устройствах, как правило, это не фактическое разрешение, а разрешение, разделенное так называемым " devicePixelRatio ".

Чтобы эмулировать мобильное устройство с точки зрения приложения, мы можем:

Установите отношение контейнера к отношению определенного мобильного устройства. Это будет перемещать/изменять размер элементов приложения точно так же, как изменение размера окна или, как маленький экран мобильного телефона.
Загрузите приложение в элементе <iframe> с шириной/высотой, установленной в resolution/devicePixelRatio, так что ширина iframe обманет медиа-запросы, и пользовательский стиль для меньших экранов вступит в силу.

Это позаботится о том, чтобы приложение работало "правильно", но элементы iframe будут выглядеть слишком большими по сравнению с реальным мобильным устройством на типичном экране компьютера.

Это, однако, зависит от разрешения и физических размеров экрана компьютера (и мы не можем знать физический размер или dpi программно, только гадать или делать измерение пользователя). Это означает, что мы не сможем получить устройство "фактического размера" на экране компьютера, просто образованное предположение.

Чтобы помочь с "слишком большой" проблемой, мы не можем просто изменить размер iframe, так как медиа-запросы перестанут работать правильно. Поэтому мы должны масштабировать iframe с преобразованием css до более разумного размера. Затем коэффициент масштабирования может быть адаптирован для различных разрешений экрана компьютера.

Концепция проиллюстрирована следующим jsfiddle: https://codepen.io/Kasparas/pen/mxPOyY

"Приложение", отображаемое эмуляторами, размещено по адресу: https://kasparasanusauskas.github.io/stackoverflow-demos/demo-app-responsive/index.html

В "приложении" есть несколько блоков фиксированного размера и @media screen and (min-width:360px) что делает синий фон на экранах размером более 360 пикселей. Это иллюстрирует разницу между макетом и медиа-запросами на разных экранах.

Ответ 4

Я понимаю, что вы хотите разрешить пользователю взаимодействовать с разделом вашей веб-страницы. Пользователь может изменить ширину и высоту раздела с помощью кнопок для каждого устройства или что-то еще. Раздел будет отвечать как отзывчивая страница.

В прошлом я настроил iframe, который указывает на другую страницу в том же домене. Изменение размера iframe должно имитировать устройство.

Ответ 5

Вы не можете использовать dpi для чего-либо, поскольку это аппаратная настройка. вы должны использовать отношение видового экрана для отображения его при желаемом разрешении% в зависимости от того, где вы предпочитаете: PX или дюймы (рассчитывается в зависимости от фактического размера видового экрана, который вы можете читать с помощью javascript).

Еще одна приятная и обычно используемая опция - установить макет телефона с наложением iframe, который печатает контент, который вы хотите, вот пример:

iframe {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #FFF;
    z-index: 5;
}

<img style="" src="http://www.mobilephoneemulator.com/images/devices/Apple-Iphone6-wm.jpg">
<iframe id="Iframe" name="Iframe" scrolling="no" frameborder="0" style="transform-origin: 0px 0px 0px; left: 30px; top: 95px; width: 375px; height: 667px; transform: scale(1);" width="375" height="667" src=""></iframe>

Ответ 6

В прошлом, когда мне приходилось тестировать это, я только что изменил размер моего браузера после добавления пользовательских свойств maxwidth/maxheight в мой CSS. Как только вы нажмете эти границы, ваш соответствующий CSS начнет работать.