在 Chrome 上模拟 iPhone X

Question

我需要在 Chrome 上模拟 iPhone X。我找到了以下信息：

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

你能告诉我应该为下面的表格赋予哪些值吗？

iPhone X sepecifications

这就是Device pixel ratio (DPR)

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.

Answer 1

根据the iPhone X Human Interface Guidelines，你应该输入：

375 为宽度
812 为身高
3 用于 设备像素比

因为比例因子是 3，你应该除 物理分辨率 (1125px × 2436px) 除以 3 以获得 逻辑分辨率。

对于 用户代理字符串 ，查看。

Answer 2

要计算设备像素分辨率，请根据提供的 link 使用 PPI 值 458ppi。

根据this answer，

458/150 = 3 DPR

要计算高度和宽度，

使用给定的物理分辨率：2436x1125 像素分辨率。

2436/3 = 812（身高）
1125/3 = 375（宽度）

这是逻辑像素分辨率。

更多信息：

Answer 3

第一张图片应该在 img 目录中另存为 iphonex.png 或更改以 img.src 开头的代码第二张图是结果的截图。

Javascript 函数将动态添加 iphone x 凹口。 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'));
    }
}

在 Chrome 上模拟 iPhone X

Emulate iPhone X on Chrome

google-chrome

ios

google-chrome-devtools

iphone-x