我搜索了移动视口,我发现它是一个虚拟窗口,大多数移动浏览器都在其中呈现页面。
但是当我在网上搜索我的索尼xperia sp手机视口大小时,This site告诉我,我的视口大小是360px,这比我的屏幕分辨率宽度(720像素)(1280 * 720像素)小得多
我有点困惑,有人能简单解释一下这里发生了什么吗?
答案 0 :(得分:7)
基本上,现代屏幕的分辨率比传统桌面显示器高得多。但是,它们不是在屏幕上显示两倍的信息,而是以两倍的密度显示相同的信息。
例如,传统桌面显示器只有72 PPI,而我的Galaxy Note 3有388 PPI。但是手机制造商意识到,即使整个网站都能清晰地显示在网站上,查看网站的缩小版也不是很有用。因此,每个设备的CSS像素比率介于1和3之间,这意味着它将每个CSS像素放大1-3倍,使其大小与桌面显示器上的大小相同。
例如,我的Note 3的原始分辨率为1080x1920,但CSS像素比为3.这意味着它向网站报告其分辨率为1080/3 x 1920/3 = 360 x 640。因此,根据您的示例,您的手机的CSS像素比率可能为2。
您可能会发现此图表非常有用:http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density它包含大多数手持设备的列表,其原生显示分辨率以及CSS像素密度。您可以通过将显示分辨率除以像素密度来计算将其视口报告给网站的内容。
答案 1 :(得分:2)
该Wikipedia链接指向已删除的页面。我不得不使用wayback机器来查看CSS比率图表。我想知道维基百科上可能存在哪些数据,我不知道在哪里找到它。选择2012年的文章,其中页面的编辑频率最高。
抱歉,我将此作为评论,但不能这样做。