Mig*_*iro 9 html screen zoom emulation screen-resolution
我正在创建一个为移动设备生成和提供网页的Web应用程序.例如,用户配置要显示的数据并使用速度模板生成最终的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仿真模式下,它们看起来非常相似.
如果有任何信息可以帮助解决这个难题,请告诉我.
像素长宽比决定宽度和高度之间的比率，衡量设备上像素的“方形”程度。
但是，Google 允许您自定义设备像素比。这测量了有多少设备像素映射到单个逻辑像素（CSS 中为 1px）。
我相信设备像素比是使各种屏幕尺寸显示为相同尺寸的重要因素。
使用设备像素比来计算有效缩放的密度计算可以在一维中计算，无需使用对角线测量。
css_width要通过平板电脑在桌面上计算有效值：
桌面像素 = 平板电脑像素 * (桌面 ppi / 平板电脑 ppi) (1)
平板电脑像素 = 平板电脑 CSS 宽度 * 平板电脑像素密度
桌面像素 = 桌面 CSS 宽度 * 桌面像素密度
进入（1）
桌面_css_宽度 * 桌面_像素_密度 = 平板电脑_css_宽度 * 平板电脑_像素_密度 * (桌面_ppi / 平板电脑_ppi)
改编
桌面_css_宽度 = 平板电脑_css_宽度 * (平板电脑像素_密度 / 桌面_像素_密度) * (桌面_ppi / 平板电脑_ppi)
逻辑缩放系数为desktop_css_width / tablet_css_width
缩放系数 = (平板电脑像素密度 / 桌面像素密度) * (桌面 ppi / 平板电脑 ppi)