is mobile viewport size larger than screen size?

人走茶凉 提交于 2021-02-07 19:24:48

问题


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.

viewport is wider than the screen. here and here

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?


回答1:


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.

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.

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.

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

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.




回答2:


That Wikipedia link is to a deleted page. I had to use the wayback machine to see the chart of CSS ratios. I wonder where else that data may exist on Wikipedia, I'm not sure where to find it. Pick an article from 2012 where the page has the highest frequency of edits.

https://web.archive.org/web/20120501000000*/http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

Sorry I'd put this as a comment, but cannot do that yet.



来源:https://stackoverflow.com/questions/23341562/is-mobile-viewport-size-larger-than-screen-size

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!