在 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) 是什么

如果您想从非 Retina 机器模拟 Retina 设备，反之亦然，请调整设备像素比率。设备像素比 (DPR) 是逻辑像素和物理像素之间的比率。配备 Retina 显示屏的设备（例如 Nexus 6P）的像素密度高于标准设备，这会影响视觉内容的清晰度和大小。

Answer 1

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

• 375 表示 宽度
• 812 表示 高度
• 3 表示设备像素比

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

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

Answer 2

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

根据this answer，

458/150 = 3 DPR

要计算高度和宽度，

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

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

这是逻辑像素分辨率。

欲了解更多信息：https://stackoverflow.com/a/21413366/4826457

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