Terms and Concepts that pertain to Rendering on Mobile devices.
Device Pixels - also called Hardware Pixels and Physical PixelsEach square pixel on the screen can be exactly one RGB color at any given time. This is built into the screen by the manufacturer. For two screens the same width/height, the more pixels a screen has, the higher its resolution. Smaller pixels built into a screen at higher density makes for sharper displays.
Traditional Screens (with no zooming or pinching)
This refers to traditional monitors and TV screens that maintain a fixed resolution, meaning you can't zoom in and out with a pinching motion of your fingers. On traditional screens, the device pixels correspond exactly (1-1 ratio) with pixel units (px) in CSS. For example, a 1200px wide block in a Web page renders exactly 3/4 the width of a 1600 pixel monitor.
CSS Pixels
On screens that let you zoom in and out by pinching your fingers, there are two types of pixels. There are device pixels that are the smallest physical screen unit for colorization. But there are also CSS Pixels that are a varying number of device pixels depending on how much the screen is zoomed. For example, if a Web page is zoomed out by a factor of 2, a 1200px wide block (CSS pixels) in the page would be rendered as only 600 device pixels wide. That is, pixel units in CSS have to be re-scaled to varying ratios of actual device pixels depending upon the amount of zoom.
In the graphics below, the dark blue represents device pixels and the light blue semi-transparency represents CSS pixels.
| Zoom Out | Zoom In |
 |
 |
Device Viewport
On a traditional screen, device pixels and CSS pixels are the same thing. For example, if the browser window is 1200 device pixels wide, then it's also 1200px CSS pixels wide. You can drag the browser window by its corner to change the viewport width.
But on a mobile device, it's not that simple. Consider this PDF that compares Device Pixels and Default Viewports for various mobile devices. Basically, the Device Pixels specify how many physical dots are are built into the screen. That's the screen's resolution. The more device pixels, the more capacity for fine detail.
The Viewport numbers in the PDF show the device default viewport sizes in CSS Pixels. The viewport widths are mostly in the range of about 2-4 times smaller than the device pixel widths. When the iPad retina screens first came out, the ratio was 2. The net effect of this is that CSS pixel units don't correspond to actual actual device pixels. On a mobile device, CSS pixels are effectively virtual pixels that might display at different sizes, depending upon how much a page is zoomed in or out. For example, if a fixed-width web page is 1200 CSS pixels wide, a mobile device with a default viewport of 400 will try to roughly fit the page on the screen by zooming it out by a factor of 3. In that case, each device pixel would be approximating 9 CSS pixels which is why it looks blurry until you zoom in.
Responsive Web Pages
This means that a Web page will respond to different devices, changing (structure and/or content) according to the size of the device's the default viewport. CSS media queries can be added to a style sheet to literally ask the device (the particular media) exactly how many CSS pixels wide its default viewport is. Media queries are generally used to establish break points that distinguish among different classes of devices such as phones, phablets (big phones that are almost like tablets), tablet computers such as iPads, and traditional desktop monitors. If you look at the default viewport sizes in the PDF provided above, you can probably see where some natural breakpoints might arise. The main goal of responsive design is that responsive pages should load on different devices at their default viewport width NOT zoomed out. So for example, a responsive page will naturally adapt to a small phone with default viewport width of 360px (CSS pixels) or a tablet computer with 768px width. Here's basically what that means. On a small phone, the page displays as only 1 column stacked content, graphics shrink to 360px or less, nav menus collapse to an icon that opens a dropdown menu, etc. But on a tablet, that same page might display with 2-column content, the images will be larger, and some of the hidden dropdown menus might now always be visible in the page as nav bars.