在网页上模拟设备屏幕

Question

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

但是，我现在正在为此创建一个预览屏幕。所以，比方说，我想看看它在 Nexus 5 上的样子。

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

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

所以，我知道设备的屏幕对角线尺寸、分辨率和 PPI（points por inch）。我需要知道的是如何为我的网站获得一些适当的测量值来模拟设备。当我转到 Chrome 仿真工具时，我看到 Nexus 5 显示为：

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

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

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

其中一个尝试是

1 / ((屏幕尺寸对角线)/像素纵横比) = 1 / (4.95/3) = 0.6060(60)

应用此缩放使其看起来不错。如果我对 Amazon Kindle HDX 采用相同的方法，它也可以工作。

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

1 / (4.5/1.25) = 0.27777777...

问题在于，与 Nexus 5 相比，应用此缩放的东西会小很多（因为缩小了很多），而且在 Chrome 仿真模式下，它们看起来非常相似。

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

Answer 1

像素纵横比决定了宽度和高度之间的比率，衡量设备上“方形”像素的大小。

不过，Google 允许您自定义设备像素比率。这测量有多少设备像素映射到单个逻辑像素（css 中为 1px）。

我相信设备像素比是使各种屏幕尺寸显示相同尺寸的重要因素。

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

通过平板电脑在桌面上计算有效css_width：

desktop_pixels = tablet_pixels * (desktop_ppi / tablet_ppi) (1)

tablet_pixels = tablet_css_width * tablet_pixel_density

desktop_pixels = desktop_css_width * desktop_pixel_density

进入(1)

desktop_css_width * desktop_pixel_density = tablet_css_width * tablet_pixel_density * (desktop_ppi / tablet_ppi)

重新排列

desktop_css_width = tablet_css_width * (tablet_pixel_density / desktop_pixel_density) * (desktop_ppi / tablet_ppi)

逻辑缩放系数为desktop_css_width / tablet_css_width

zoom_factor = (tablet_pixel_density / desktop_pixel_density) * (desktop_ppi / tablet_ppi)