About Responsive Sites, Pixels, and Density

About responsive sites, pixels, and density

@media (max-width: 1199px){
  /*code*/
}

The max-width property in the media query works a little different. It is not the resolution of the screen. It is equivalent css pixel.

Here are a couple of articles.

A pixel identity crisis.

A pixel is not a pixel is not a pixel.

moz media query page.

If you want to target device resolution you should use

@media all and (max-device-width: 320px) {

}.

max-device-width:This property measures the device-width. If you write css using media query using this it will get a little complex (mobiles tabs and even desktops can have 1080p resolution screens). In order to target device resolutions you might have to look into properties like -device-pixel-ratio , orientation and device-height to give better control of layouts

CSS Responsive Design for High vs. Low Pixel Density Devices?

Yes, it should render the same.

CSS uses “px” to relate “...the pixel unit to the reference pixel...”, thus a single CSS “px” could represent more than one physical pixel as different devices (ie. HD vs. 4K) have different pixel densities.

A single “px” in CSS should always be about 1/96 of an inch though. You may see variations in rendering based on browser rendering and/or monitor resolution quirks.

Why responsive web design respond differently on screens that have the same resolution but different ppi?

So it turns out a CSS pixel is different from a hardware pixel.

CSS specification says:

If the pixel density of the output device is very different from that
of a typical computer display, the user agent should rescale pixel
values. It is recommended that the pixel unit refer to the whole
number of device pixels that best approximates the reference pixel. It
is recommended that the reference pixel be the visual angle of one
pixel on a device with a pixel density of 96dpi and a distance from
the reader of an arm's length.

This is a good read:
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

CSS media queries, pixel density, desktop and mobile devices

Add this to your head:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width takes pixel density into account, so a device with true resolution of 640px width and 2.0 pixel density will have a browser viewport width of 320px. Initial scale ensures mobile browsers do not attempt to zoom to fit anything (for true fluid responsive sites).

How to handle responsive design widths when portable devices have a higher pixel density?

A CSS pixel and a screen pixel are not created equal. This blog post will hopefully help out.

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

Responsive Design: max-device-width, max-width and min-device-pixel-ratio

Hidpi only means that 1 css pixel is rendered with 3x3 actual pixels (this varies for devices, iPhone pixel density is 2- so on iPhone 1 css pixel is made from 4 actual LCD pixels.). Websites on galaxy s4 are still rendered as 360x640px with pixel density 3, so you don't need any additional css for HiDPI devices.

you only need to add this meta tag in year head section

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

and apply css as for regular non HiDPI device.

Is there some best approach for responsive design?

I thnk using the media query settings you note will complicate your life because they will make it difficult to target different viewports or window widths.

@media only screen and (min-width: 480px) { ... } will target all widths 480px and above,

@media only screen and (min-width: 600px) { ... } will target all widths 600px and above.

So they will both be fighting for control whenever the viewport is 600px or higher. You could consider something like the following:

/* your default, site-wide settings followed by */
@media only screen and (max-width: 480px) { ... }
@media only screen and (min-width: 481px) and (max-width: 600px) { ... }
@media only screen and (min-width: 601px) and (max-width: 768px) { ... }
@media only screen and (min-width: 769px) and (max-width: 992px) { ... }
@media only screen and (min-width: 993px) { ... }  

I'm not saying that these are perfect break points, that's often specific to your design. The important bit is the technique you use to target the different viewports.

There are different schools of thought for pixels vs percentages, and both have advantages. If you are getting up-to-speed with responsive design, personally I think it's worth spending time with some of the well established frameworks like Bootstrap or Foundation or Skeleton or one of the many others.

They are all fantastic, they will save you heaps of learning time, give you good cross-browser results, and the more you know, the easier it will be to break away from them when needed.

Good luck!

What is an Android device independent pixel and how does it differ from a regular css pixel?

As a developer all the information you are reading is important to you. I stumbled upon the same concepts when I was designing my first responsive design and thought latest iphone is a full hd mobile having resolution width about 1980 or may be 1080 pixels and I am using max-width: 768px in my media query.

As you mentioned there is an official css pixel which is equal 1/96 inches or in other words 1 inch of any media device has 96 css pixels. When you write media query you are referring to these css pixels. So if the iPhone has width around 3-4 inches then it is 300 to 400 css pixel wide. Now you might think that since only css pixels matter for web design you shouldn't care about dp ,dpi, ppi or dip like stuff. But you must know them too because you'll need them when designing for ratina displays.

The css pixels are also called logical pixels. The other kind of pixels are physical pixels. Actually a pixel by definition is the smallest colourable section of a screen. This smallest colourable section is called physical pixel. When we set border: 1px solid red, this would fill 1 logical pixel(1/96 inches) width on screen with red color. Now this logical pixel might have many physical pixels in it. If a screen provides 4 physical pixels in one logical pixel then we can distinguish 0.25 solid red from 0.5 solid red -- that is the screen can provide finer visual details.

Now why would you need to care about physical pixels? Nowadays screens have very high resolutions, that is more physical pixels in one logical pixels. E.g. mac book has around 2560-by-1600 resolution in around 13 inches screen where as a normal pc with 96dpi has 1367 by 768 physical pixels in 19 inches. Now if you render an image of width 1367 css pixels and height 768 css pixel on my normal 19 inches pc as <img src="bla.jpg" width="680" height="380"> then the image would be shrunk to half of its actual size. Every pair of pixels will be merged to one on my screen, that is I have lost a detail of 1px for every other 1px in the image. On the other hand if I render an image having width 680 css pixels and height 380 css px then both these image would appear exactly same. The fact is my screen provides only 1/96 inch wide minute detail only. On the other hand if I had mac book then the 1367 css px wide image would appear more crisper to me because mac book will scrunch the image to half but will not merge 2pixels into one and because it can provide detail of 0.5 logical pixel too that is it can show two different colors in 1/96 inches. Ok fine, but how can I use this fact for web designing? What we can do is provide higher resolution images to ratina display and lesser resolution images to normal displays. To do this we use the following:

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

device-pixel-ratio is number of physical pixels available in one logical pixel on the display. dpi means the same thing. Actually dpi means physical pixels in one inch of display.

---

Related Topics