Screen resolution vs screen size? Confused when using media queries

I know that when designing website you need to consider what yours look like on a mobile device.
So here is the part I am confused. On google chrome’s dev tool , there is this cell phone icon.
When you click on it, it will imitate the screens of different cellphones. It includes nexus 6p, iphone 6 and etc.

The thing that got me confused is this: on google’s dev tool, it says iphone 6 plus’s size is: 414 x 736.
But apple claims that their screen resolution is 1080p (on a iphone 6+)…

So… if apple is using pixel as their unit? Then what is this 414 x 736 thingy???

Oh… it was 4.7 inches…


It is a viewport.

1 Like