我正在创建一个为移动设备生成和提供网页的网络应用。例如，用户配置要显示的数据并使用速度模板生成最终的HTML / CSS / JS文件。 当配置模板和要包括的信息时，客户端将连接到服务器以显示生成的页面。
但是，我现在正在为此创建预览屏幕。所以，让我们说，我想知道它会是什么样子，让我们说，Nexus 5。
我的目标是在Chrome上创建类似谷歌的东西 - 移动设备模拟。问题是我无法理解他们如何做这种模拟。
确实必须缩小内容才能显示所有内容。这很容易理解，好像屏幕不够大，我们需要使它适合。
所以，我知道设备的屏幕对角线尺寸，它的分辨率和PPI（点数英寸）。我需要知道的是如何为我的网站进行适当的测量以模拟设备。当我转到Chrome仿真工具时，我发现Nexus 5显示为：
我知道他们如何计算像素宽高比：它是设备的PPI除以160（基本PPI）。因此，445/160 = ~3（445是Nexus 5的像素密度）。这就是他们达到360 x 640的方式：他们将分辨率除以像素长宽比（3）。
在我的网站上，我有一个iframe并将生成的页面加载到其中。然后我知道我必须应用缩放级别。这就是问题所在。我真的不知道缩放的值应该是什么。
其中一次尝试是
1 /（（屏幕对角线）/像素宽高比） = 1 /（4.95 / 3） = 0.6060（60）
应用此缩放使其看起来很好。如果我使用亚马逊Kindle HDX采用相同的方法，它也可以。
但是，如果我使用LG L70，我会得到以下信息：
1 /（4.5 / 1.25） = 0.27777777 ......
问题在于，与Nexus 5相比，应用此缩放功能会比较小（因为缩小了很多），而在Chrome仿真模式下，它们看起来非常相似。
如果有任何信息可以帮助解决这个难题，请告诉我。
答案 0 :(得分：4)
像素长宽比决定宽度和高度之间的比率，衡量＆＃34; square＆＃34;像素在设备上。
但是，Google可让您自定义设备像素比率。这可以测量有多少设备像素映射到单个逻辑像素（1px in css）。
我相信设备像素比率可以使各种屏幕尺寸看起来相同。
使用设备像素比计算有效缩放的密度计算可以在一个维度上计算，不需要使用对角线测量。
要从平板电脑计算桌面上的有效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）