Responsive Web Design – Viewports and device pixels ratio

Feb 15, 2014

—

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

Some useful resources

Mobile Design Responsive Web Design Visual Design

About the author

GOPAL JUNEJA

UX Enthusiast – Enterprise & SAAS Based Apps

Comments

7 responses to “Responsive Web Design – Viewports and device pixels ratio”

Georgios Georgiou

February 17, 2014

I still do not understand the difference between logical and physical resolution.

Reply
1. Gopal
  
  February 17, 2014
  
  @Georgios – Physical resolution refers to the resolution (total number of pixels) of the target device screen. For example iphone 4 resolution is 640 x 960. This is the physical resolution of the iphone4. Now, how can these 640 x 960 pixels can be fit in a 3.5 inch device (a small screen)?
  
  It is because of the retina display. Pixels ratio of the retina display is 2. It crams all the pixels (640 x 960) into the device 3.5 inch across. Here comes the logical resolution now; logical resolution of the iphone4 is 320 x 480.
  
  (640/2) = 320
  (960/2) = 480
  
  So, physical resolution is crammed into the logical resolution.
  
  Reply
matthew heinke

March 1, 2014

mobile first design is something that i have taken to (even as far as coding from my tablet..) BUT i will say, build for your user base, if your analytics say you get less then 5% of your traffic from mobile, dont waste your time (unless its a pet project or something)

Reply
Steven Luiting

March 10, 2014

Mobile First is a bad and simplistic concept. All resolutions should be considered and then broken down into parts. I also wouldn’t go by analytics either. I subscribe to the TV model and if you don’t build it they won’t come.
Please, let’s use some brain power and stop parroting other people.

Reply
Paul Hanlon

March 10, 2014

Man, this makes my head hurt. It reminds me of the crap we all had to go through during the browser wars, with all the kludges we had to use so it could be viewed with some semblance of order.
As I see it, the two critical measurements that are needed are the physical device width (in inches or millimetres) and the resolution. Unfortunately I don’t see a way of discerning the actual device width. Am I missing something?

Reply
Ali K.

March 10, 2014

There are no more specific breakpoints now. Best approach is simply expand your desktop browser from min width to max and where ever your design goes bad … that would be your media query breakpoint.

Also go for min-width query (mobile first) but it won’t work on IE8

Reply
Kieren Trinder

March 10, 2014

I’m there with the mobile first approach – it’s the only way to ensure that resources are kept light across mobile networks without having your head explode.

Reply