it-roy-ru.com

Эмулировать iPhone X на Chrome

Мне нужно подражать iPhone X на Chrome. Я нашел информацию ниже:

Height: 5.65 inches (143.6 mm)
Width: 2.79 inches (70.9 mm)

Можете ли вы сказать мне, какие значения я должен дать в форме ниже?

Спецификации iPhone X

 unknown form elements

Вот что Соотношение пикселей устройства (DPR) is

Если вы хотите эмулировать устройство Retina с устройства, не поддерживающего Retina, или наоборот, отрегулируйте соотношение пикселей устройства. Соотношение пикселей устройства (DPR) - это соотношение между логическими пикселями и физическими пикселями. Устройства с дисплеями Retina, такие как Nexus 6P, имеют более высокую плотность пикселей, чем стандартные устройства, что может влиять на четкость и размер визуального содержимого.

5
Sampath

Согласно Руководству по интерфейсу пользователя iPhone X , вы должны ввести:

  • 375 для ширина
  • 812 для высота
  • 3 для соотношение пикселей устройства

Поскольку масштабный коэффициент равен 3, вы должны разделитьфизическое разрешение (1125px × 2436px) by 3, чтобы получить логическое разрешение.

Для строка агента пользователя, проверьте этот ответ .

6
Tamás Sengel

Чтобы рассчитать разрешение пикселей устройства, используйте значение PPI, равное 458ppi в соответствии с предоставленной ссылкой.

Согласно этот ответ ,

458/150 = 3 DPR

Чтобы рассчитать высоту и ширину,

используйте данное физическое разрешение: разрешение 2436x1125 пикселей.

  • 2436/3 = 812 (высота)
  • 1125/3 = 375 (ширина)

Это логическое разрешение пикселей.

Для получения дополнительной информации: https://stackoverflow.com/a/21413366/4826457

1
Suraj Rao

Первое изображение должно быть в каталоге img, сохраненном как iphonex.png, или изменить код, начиная с img.src Второе изображение - это скриншот с результатом.

Функция Javascript будет динамически добавлять iphone x notch . IPhoneX (); в первой строке должен запускаться после загрузки содержимого DOM.

iPhoneX();
window.onresize = window.onorientationchange = function() {
    //Your other functions
    setTimeout(iPhoneX,100);
}

function iPhoneX() {
    if (window.innerWidth == 375 && window.innerHeight == 812) {
        if (!document.getElementById('iphone_layout')) {
            var img = document.createElement('img');
            img.id = 'iphone_layout';
            img.style.position = 'fixed';
            img.style.zIndex = 9999;
            img.style.pointerEvents = 'none';
            img.src = 'img/iphonex.png'
            document.body.insertBefore(img,document.body.children[0]);
        }
    } else if (document.getElementById('iphone_layout')) {
        document.body.removeChild(document.getElementById('iphone_layout'));
    }
}

 iphone_layout.png

 screenshot

0
gdarcan