在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

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

根据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内容后运行。

getHeros(hero: string): Observable<Hero[]>{
    const url = "http/somthing/getHeros?"+hero;
    console.log(url);
    return this.httpClient.get<Hero[]>(url);