在Chrome上模拟iPhone X

Question

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

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)

请告诉我在下面的表格中应该填什么数值？

iPhone X规格说明

这是 设备像素比（DPR） 是什么意思

如果想从非Retina机器模拟Retina设备或反之，则需要调整设备像素比。设备像素比（DPR）指的是逻辑像素和物理像素之间的比例。具有Retina显示屏的设备，例如Nexus 6P，具有比标准设备更高的像素密度，这可能会影响视觉内容的清晰度和大小。

- Sampath

---

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh/related?hl=en - iPatel

请参考此链接：http://www.kylejlarson.com/blog/iphone-6-screen-size-web-design-tips/ - seggy

Answer 1

根据iPhone X人机界面指南，您应输入：

• 375作为宽度
• 812作为高度
• 3作为设备像素比

由于比例因子是3，您应除以3物理分辨率（1125px × 2436px）以获取逻辑分辨率。

要了解用户代理字符串，请查看此答案。

- Tamás Sengel

---

有任何计算它的公式吗？ - Sampath

@Sampath 将像素分辨率即2436x1125除以3。 - Suraj Rao

H和W怎么样？@SurajRao - Sampath

H和W是设备的物理分辨率除以DPR。 - Tamás Sengel

非常感谢。希望下次我能为iPhone XX做到这一点:D - Sampath

需要注意的一点是Chrome会模拟屏幕大小，但不考虑浏览器UI的影响。阅读以下链接以了解更多信息：http://www.kylejlarson.com/blog/iphone-6-screen-size-web-design-tips/http://www.kylejlarson.com/blog/ipad-screen-size-guide-web-design-tips/ - brandito

Answer 2

要计算设备像素分辨率，请使用提供的链接中给出的PPI值，该值为458ppi。

根据此答案，

458/150 = 3 DPR

要计算高度和宽度，

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

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

这是逻辑像素分辨率。

更多信息，请参见：https://dev59.com/qWoy5IYBdhLWcg3wFqFT#21413366

- Suraj Rao

---

非常感谢。希望你也能回答这个问题：https://stackoverflow.com/questions/47117951/emulate-low-resolution-device-on-the-chrome-dev-tool - Sampath

Answer 3

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

Javascript函数将动态添加iPhone X刘海屏。 在DOM内容加载后，第一行应该运行iPhoneX();

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

- gdarcan

---

什么是景观？ - Doctor.Who.

你可以轻松地使用JavaScript完成它。 - gdarcan