Is the Mobile Viewport Size Based on Browser or the Screen Resolution

is mobile viewport size larger than screen size?

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.

Why android browser viewport is much smaller than actual screen size of the mobile phone, even when using width=device-width?

A detailed explanation of the issue can be found in that blog post.

The number that you see (369px) is actually the size of the device multiplied by the default, assumed, screen density of 160 dpi.

In order to use the device screen density, you have to specify, in the viewport meta, that you want to use the device's dpi.

e.g.:

<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">

EDIT: The documentation of the WebView class now also has information about the target-densityDpi parameter, and the possible values.

Mobile browsers low resolution viewport

Ok, this website tells everything that I needed to know:
iPhone Screens Demystified

In sort:

iPhone [6,7,8] Plus native resolution is 1242x2208, not 1080x1920!
iPhone screen resolution is actually 1080x1920! It downsamples everything from the native resolution to fit the actual screen resolution every time.
Viewport's device-width constant is 414 "points" wide. This is 1/3 of the 1242 pixels of the native resolution width.
Safari makes this "low resolution" viewport so websites can know that the screen is small and adapt itself to this lower resolution.

My Canvas is rendered using the informed available screen space, which is 414 wide and ~450 tall. Then my routine renders everything inside this canvas using this as base numbers... and the result is a generated image with 1/3 of the native resolution of the screen.

To solve my problem I used this script to set the viewport width to the real native width (which is 1242). Safari will make everything fit in the screen on it's native resolution.

What is today's most popular screen resolution?

Google previously had a tool at browsersize.googlelabs.com which is now shut down. Not sure that Microsoft currently shares this type of data either.

Here are a couple popular website statistics plugins used on a large number of websites that publish aggregated statistics which might be helpful:

http://www.w3counter.com/globalstats.php

http://gs.statcounter.com/#resolution-ww-monthly-201412-201505

From these charts you can see that no screen resolution individually makes up a majority of users as it might have in the past. Even the resolution with the highest share (1366x768) does not break the 30% mark in either of these statistics websites. Statistics from websites that I work on support these results as well.

I assume you are looking into browser sizes for the purpose of web design/development. In recent years the focus has turned towards responsive web design (RWD) due to the ever increasing usage of smartphones and tablets to access the web. Designing for just one particular resolution is not as viable as it was in the past because of this.

what's the difference between window size and viewport size

Another way to say what Kateryna S. mentioned is that the viewport renders differently depending on the size of your device. For example let's say you made a responsive web app using material design that through the grid system looks one way on your desktop browser and one way on your mobile device. The Mobile device has a much smaller viewport and will render the site using the smaller grid.

For example, if you look at material design and resize your browser you will see how it will look on different viewports. If you resize your browser to the smallest size that mimic basically what you would see on your mobile device.

https://material.io/design/components/cards.html#usage

The window is just your browser view and is not related to other devices.

Resolution of smartphone browsers

In my experience, most of the time you can get the results you want if you structure everything correctly and just focus on device width.

Device width is a true measure of the pixels on the smartphone or tablet, figures for resolution are typically double for retina devices.

Structuring correctly means:

(1) In the head of your doc include your meta tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

optionally you could prevent zooming with

<meta name="viewport" content="width=device-width, user-scalable=no" />

(2) In your CSS use media queries like

@media (max-width: 480px) {
  ...
}

@media (max-width: 767px) {
  ....
}

@media (min-width: 768px) and (max-width: 979px) {
  ...
}

@media (min-width: 1200px) {
  ...
}

The break points you choose aren't so important but rather the prinicple that you are manipulating the on-screen display based on pixel widths and not complicating your life with pixel ratios, resolution, orientation and other related details.

For sure you will encounter exceptions but if you start simple and it gets the results you want, then you avoid the slippery slope of trying to target devices, and it helps future-proof your design.

Good luck!

Get screen resolution on a mobile website

You can perhaps use the screen object:

var w = screen.width;
var h = screen.height;

Update - Try to use it with the window.devicePixelRatio:

var ratio = window.devicePixelRatio || 1;
var w = screen.width * ratio;
var h = screen.height * ratio;