移动视口大小是否大于屏幕尺寸?

Mos*_*ava 4 html css android viewport

我已经搜索了移动视口,我发现它是一个虚拟窗口,大多数移动浏览器都在其中呈现页面.

视口比屏幕宽. 在这里这里

但是当我在网上搜索我的sony xperia sp手机视口大小时,这个网站告诉我,我的视口大小是360px,这比我的屏幕分辨率宽度(720像素)(1280*720像素)小.

我有点困惑,任何人都能简单解释一下这里发生了什么?

Jam*_*ffy 8

基本上,现代屏幕具有比传统桌面显示器高得多的每英寸像素分辨率.但是,它们不是在屏幕上显示两倍的信息,而是以两倍的密度显示相同的信息.

例如,传统的桌面显示器只有72 PPI,而我的Galaxy Note 3有388 PPI.但是手机制造商意识到,即使整个网站都能清晰地显示在网站上,查看缩小版本的网站也不是很有用.因此,每个设备的CSS像素比率介于1和3之间,这意味着它将每个CSS像素放大1-3倍,使其大小与桌面显示器上的大小相同.

例如,我的注释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像素密度.您可以通过将显示分辨率除以像素密度来计算将其视口报告给网站的内容.