移动视口尺寸大于屏幕尺寸吗? [英] is mobile viewport size larger than screen size?

问题描述

我已经搜索了有关移动视口的信息，发现这是一个虚拟窗口，大多数移动浏览器都在其中渲染页面.

I've googled about mobile viewport, and I found out that it's a virtual window that most of the mobile browsers render pages in it.

视口比屏幕宽.此处和但是，当我在网上搜索我的Sony Xperia sp手机视口尺寸时，此网站告诉我，我的视口大小为360px，比我的屏幕分辨率宽度(720 px)(1280 * 720 px)小.

But When I search the web for my sony xperia sp phone viewport size, This site tell me that my viewport size is 360px which is too smaller than my screen resolution width (720 px)(1280*720 px).

我有点困惑，有人可以简要解释一下这是怎么回事吗?

I'm a little confused, can anybody briefly explain What's going on here?

推荐答案

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

Basically, modern screens have a much higher pixels-per-inch resolution than traditional desktop displays. But rather than displaying twice as much information on the screen, they display the same information at twice the density.

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

For example, a traditional desktop display has only 72 PPI, while my Galaxy Note 3 has 388 PPI. But phone manufacturers realized that it's not very useful to view a zoomed-out version of a website even if the whole thing could fit crisply on the display. So instead, each device has a CSS pixel ratio of between 1 and 3, which means it scales up each CSS pixel 1-3 times to make it approximately the same size it would be on a desktop monitor.

例如，我的Note 3的原始分辨率为1080x1920，但是CSS像素比率为3.这意味着它向网站报告其分辨率为1080/3 x 1920/3 = 360 x 640.

My Note 3 for example has a native resolution of 1080x1920, but a CSS pixel ratio of 3. That means it reports to websites that its resolution is 1080/3 x 1920/3 = 360 x 640.

因此，根据您的示例，您的手机的CSS像素比例可能为2.

So from your example, your phone probably has a CSS pixel ratio of 2.

您可能会发现此图表很有用: http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density 它具有一个大多数手持设备的列表，它们的本机显示分辨率和CSS像素密度.您可以通过将显示分辨率除以像素密度来计算向网站报告的视口.

You may find this chart useful: http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density It has a list of most handheld devices, their native display resolution, and their CSS pixel density. You can calculate what their viewport will be reported to websites by dividing the display resolution by the pixel density.

这篇关于移动视口尺寸大于屏幕尺寸吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！