在网页上模拟设备屏幕
Simulating device screen on web page
我正在创建一个为移动设备生成和提供网页的网络应用程序。例如，用户配置要显示的数据并使用速度模板生成最终的 HTML/CSS/JS 文件。
配置模板和要包含的信息后，客户端连接到服务器以显示生成的页面。
不过，我现在正在为此创建一个预览屏幕。所以，比方说，我想看看它在 Nexus 5 上的样子。
我的目标是在 Chrome 上创建类似 Google 的东西 - 移动设备仿真。问题是我无法理解他们是如何进行这种模拟的。
确实必须缩小内容才能显示所有内容。这很好理解，好像屏幕不够大，我们需要让它适应。
所以，我知道设备的屏幕对角线尺寸、分辨率和 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 仿真模式下，它们看起来很相似。
如果有任何信息可以帮助解决这个难题，请告诉我。
像素纵横比决定了宽度和高度之间的比率，这是衡量设备上“方形”像素的程度的一种度量。
但是，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)
我正在创建一个为移动设备生成和提供网页的网络应用程序。例如，用户配置要显示的数据并使用速度模板生成最终的 HTML/CSS/JS 文件。 配置模板和要包含的信息后，客户端连接到服务器以显示生成的页面。
不过，我现在正在为此创建一个预览屏幕。所以，比方说，我想看看它在 Nexus 5 上的样子。
我的目标是在 Chrome 上创建类似 Google 的东西 - 移动设备仿真。问题是我无法理解他们是如何进行这种模拟的。
确实必须缩小内容才能显示所有内容。这很好理解，好像屏幕不够大，我们需要让它适应。
所以，我知道设备的屏幕对角线尺寸、分辨率和 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 仿真模式下，它们看起来很相似。
如果有任何信息可以帮助解决这个难题，请告诉我。
像素纵横比决定了宽度和高度之间的比率，这是衡量设备上“方形”像素的程度的一种度量。
但是，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)