Responsive Web Design – Viewports and device pixels ratio

Pixel ratio  4
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

Pixel 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

Author: Gopal Juneja

A UX/UI enthusiast living in India Delhi having 18+ years of industry experience to use in beautiful design and handsome front end coding.

7 thoughts on “Responsive Web Design – Viewports and device pixels ratio”

    1. @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.

  1. 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)

  2. 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.

  3. 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?

  4. 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

  5. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *