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

我在谷歌上搜索了移动视口，发现它是一个虚拟窗口，大多数移动浏览器都在其中渲染页面。

视口比屏幕宽。here https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag and here https://www.youtube.com/watch?v=VthgutvcJs0

但是当我在网上搜索我的索尼 xperia sp 手机视口尺寸时，这个网站 http://viewportsizes.com/?filter=sony%20xperia%20sp告诉我，我的视口大小是 360px，这比我的屏幕分辨率宽度（720 px）（1280*720 px）太小了。

我有点困惑，有人能简单解释一下这是怎么回事吗？

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

例如，传统的桌面显示器只有 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_密度 http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density它包含大多数手持设备、其本机显示分辨率以及 CSS 像素密度的列表。您可以通过将显示分辨率除以像素密度来计算他们的视口将报告给网站的内容。