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?
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments