html - 在网页上模拟设备屏幕

Question

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

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

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

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

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

• 分辨率 360 x 640
• 像素宽高比 3

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

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

其中一个尝试是

1 / ((screensize diagonal)/Pixel aspect ratio) = 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)