在Chrome上模拟iPhone X.

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

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

你能告诉我应该给下面的表格提供哪些值？

iPhone X的规格

这就是设备像素比（DPR）

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

Answer 1

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

• 宽度为375
• 812为高度
• 3为器件像素比

由于比例因子为3，因此应将物理分辨率 （1125px×2436px） 除以3以获得逻辑分辨率 。

对于用户代理字符串 ，请查看此答案 。

Answer 2

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

根据这个答案 ，

458/150 = 3 DPR

要计算高度和宽度，

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

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