Html 网页上的模拟设备屏幕

我正在创建一个为移动设备生成和服务网页的web应用程序。例如，用户配置要显示的数据，并使用velocity模板生成最终的HTML/CSS/JS文件。 配置模板和要包含的信息后，客户端将连接到服务器以显示生成的页面

但是，我现在正在为此创建一个预览屏幕。比如说，我想看看Nexus5会是什么样子

我的目标是在Chrome上创建类似谷歌的东西——移动设备仿真。问题是我无法理解他们是如何进行这种模拟的

确实，为了显示所有内容，必须缩小内容。这是很容易理解的，好像屏幕不够大，我们需要使它适合

因此，我知道该设备的屏幕对角线大小、分辨率和PPI（每英寸点数）。我需要知道的是如何为我的网站获得一些合适的测量值来模拟设备。当我转到Chrome仿真工具时，我看到Nexus 5显示为：

• 分辨率360 x 640
• 像素纵横比3

我知道他们是如何计算像素纵横比的：它是设备的PPI除以160（基本PPI）。因此，445/160=~3（445是Nexus5的像素密度）。这就是他们获得360 x 640的原因：他们将分辨率除以像素纵横比（3）

在我的网站上，我有一个iframe并将生成的页面加载到其中。然后我知道我必须应用缩放级别。这就是问题所在。我真的不知道缩放的值应该是多少

其中一次尝试是

1/（（屏幕大小对角线）/像素纵横比） = 1 / (4.95/3) =0.6060（60）

应用此缩放使其看起来很好。如果我对Amazon Kindle HDX采用同样的方法，它也会起作用

但是，如果我使用LG L70，我会得到以下结果：

1/（4.5/1.25） =0.277777

问题是，与Nexus5相比，应用这种缩放效果要小得多（因为缩小了很多），而且在Chrome仿真模式下，它们看起来非常相似

---

请告诉我是否还有任何信息可以帮助解决这个难题。

像素纵横比决定宽度和高度之间的比率，这是一种测量设备上“正方形”像素的方法

然而，谷歌允许你定制设备像素比例。这测量有多少设备像素映射到单个逻辑像素（css中为1px）

我相信设备像素比率是使各种屏幕大小显示相同大小的重要因素

使用设备像素比率计算有效缩放的密度计算可以在一维中计算，无需使用对角线测量

要从平板电脑计算桌面上的有效

css\u宽度

：

桌面像素=平板像素*（桌面像素/平板像素）（1）

平板电脑像素=平板电脑css宽度*平板电脑像素密度

桌面像素=桌面css宽度*桌面像素密度

进入（1）

桌面宽度*桌面像素密度=平板电脑宽度*平板电脑像素密度*（桌面ppi/平板电脑ppi）

重新安排

桌面宽度=平板电脑宽度*（平板电脑像素密度/桌面像素密度）*（桌面ppi/平板电脑ppi）

逻辑缩放因子为

desktop\u css\u width/tablet\u css\u width

缩放系数=（平板电脑像素密度/桌面电脑像素密度）*（桌面电脑ppi/平板电脑ppi）