For @media queries why do I have to put "device" in the max width query?

Question

I am trying to master responsive design. I created this media query to cater for smartphones

@media screen and (max-width:500px) {
/* css rules for smartphones */
}

However, when I look on my iPhone, it is not showing these rules, even though when I resize my browser to under 500px the rules apply. So I added in jquery

width = $(window).width();
$('#info').html(width);

This showed me that my iPhone was actually 980px wide, which I thought was strange, as I was sure I read it was only 320px wide. So this lead to great confusion. After lots of playing around I seemed to have got it working with this:

@media screen and (max-device-width:500px) {
/* css rules for smartphones */
}

But I have no idea why it works with this, and what I have actually done.

Can someone tell me what "device" means? And why is the iPhone resolution 980px according the jquery?

Answer 1

When using media queries, you should also use:

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

in your header.

max-width is the width of the target display area, e.g. the browser

max-device-width is the width of the device's entire rendering area, i.e. the actual device screen

Answer 2

For most devices the screen resolution/display size is equal to the viewport. This is true of desktop and laptop computers, however for mobile devices this may not be true!!

Many phone browsers scale web pages down to a wider viewport width to fit them onto the screen. This is sometimes called overview mode. These browsers allow the user to zoom in and scale the pages up to view the bit they want to see. For example, although a device screen might have a width of 320px the viewport can have a width of 980px. In this case a web page designed at 980px or less will fit completely on the screen.

The difficulty comes with different mobile devices and mobile browsers as they have different viewport sizes. Here is a short list of some popular mobile browser viewport sizes:

• Opera Mobile browser viewport 850px
• iPhone safari browser viewport 980px
• iPad (landscape & portrait mode) viewport 980px
• Android browser viewport 800px
• IE mobile browserviewport 320px

Many phones have a different pixel density or dpi than the desktop 72dpi, so setting target-densitydpi=device-dpi is a good idea to prevent blurry images due to scaling effects. The viewport meta tag for the touch sensitive sidebar version of this blog is:

• height = [pixel_value | device-height] ,

• width = [pixel_value | device-width ] ,

• initial-scale = float_value ,

• minimum-scale = float_value ,

• maximum-scale = float_value ,

• user-scalable = [yes | no] ,

• target-densitydpi = [dpi_value | device-dpi |high-dpi | medium-dpi | low-dpi]