Major technology changes have been seen in last few years. Smartphone and tablets are changing the way of internet usage and taking the web everywhere. Responsive web design (RWD) is around from some years now. Initially the focus in a RWD project was just to decide the different breakpoints – like small, medium and large display with portrait or landscape orientation. But now different variables have been added like device pixels ratio, device pixels density, device aspect ratio, PPI.
Visual viewport and Layout viewport
Visual viewport is the part of page shown on-screen. User may scroll or zoom to change the size of visual viewport. Layout viewport is considerably wider than visual viewport and it contains elements that appear or do not appear on the screen.
Whatever is shown on the screen with the maximally zoomed-out mode is equal to width and height of the layout viewport
High resolution display devices and device pixels ratio
There are many high resolution devices in the market like Samsung Galaxy S4 (1080 x 1920), iPhone 5s (1136 x 640), iPad 3, 4 (2048 x 1536). But the logical resolution of these devices is not this much. For example iPhone4 (320 x 480 width) despite it technically having 640 x 960 resolution. This is due to retina display which crams two device pixels in one CSS pixel. That means device pixels ratio of iPhone 4 is 2.
CSS pixels are dependent on screen size and pixels density
|Device||Logical Resolution||Pixel Ratio||Physical Resolution|
|iPhone 3gs||320 x 480||1||320 x 480|
|iPhone 4s||960 x 640||2||960/2 x 640/2|
|iPhone 5s||1136 x 640||2||1136/2 x 640/2|
|iPad 3+||2048 x 1536||2||2048/2 x 1536/2|
|Galaxy S plus (i9001)||480 x 800||1.5||480/1.5 x 800/1.5|
|Galaxy S III||720 x 1280||2||720/2 x 1280/2|
|Galaxy S IV||1080 x 1920||3||1080/3 x 1920/3|
|Xperia S||720 x 1280||2||720/2 x 1280/2|
|Xperia Z||1920 x 1080||3||1920/3 x 1080/3|
To dig it more read next article – Pixels density and resolution