Emulate iPhone X on Chrome

问题

I need to emulate an iPhone X on Chrome. I have found the info below:

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

Can you tell me which values should I give to the form below?

iPhone X sepecifications

This is what Device pixel ratio (DPR) is

If you want to emulate a Retina device from a non-Retina machine or vice versa, adjust the Device pixel ratio. The device pixel ratio (DPR) is the ratio between logical pixels and physical pixels. Devices with Retina displays, such as the Nexus 6P, have higher pixel density than standard devices, which can affect the sharpness and size of visual content.

回答1:

According to the iPhone X Human Interface Guidelines, you should enter:

375 for the width
812 for the height
3 for the device pixel ratio

Because the scale factor is 3, you should divide the physical resolution (1125px × 2436px) by 3 to get the logical resolution.

For the user agent string, check out this answer.

回答2:

To calculate Device Pixel Resolution, use the PPI value which is 458ppi according to the link provided.

According to this answer,

458/150 = 3 DPR

To calculate height and width,

use the given physical resolution: 2436x1125-pixel resolution.

2436/3 = 812 (Height)
1125/3 = 375 (Width)

This is the logical pixel resolution.

For more info:https://stackoverflow.com/a/21413366/4826457

回答3:

First image should be in img directory saved as iphonex.png or change the code starting with img.src Second image is the screenshot of the result.

Javascript function will dynamically add the iphone x notch. iPhoneX(); on the first line should run after DOM content loaded.

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'));
    }
}

来源：https://stackoverflow.com/questions/47552632/emulate-iphone-x-on-chrome

标签

ios

google-chrome

google-chrome-devtools

iphone-x