Responsive Design Mobile and Desktop

Question

There are a few things I just can't get my head around,

Mobiles these days have as good as a resolution as desktop monitions. When building a responsive website you use media queries and make things fluid. These media queries are based on size of screen in pixels. So say i make a responsive website and design it for 480px, 800px and 1080px. When i view it within a desktop browser i would view the 1080px, however when i view it within a high end mobile I also view the 1080px. Why do we use pixels if it has no real relation to the size of the screen?

However if you use Viewport Meta Tag it some how sorts this problem out. Can someone please explain how responsive design is used in relation to pixels even know pixels doesn't determine the size of the screen? and also how the viewport tag or any other works?

Answer 1

A mobile browser loads a website in a view which is bigger than the screen of the phone, let's say 640 x 320, we call this the viewport. If the screen of the phone in fact physical have a size of 320 x 160 pixel, your phone will show the user half of the site (typical for a non mobile optimized website). The phone user has to zoom or scroll to see the other half.

If a developer build a mobile website, he want the viewport equals the screen. He can get this by setting <meta name="viewport" width="device-width">. This means the mobile browser loads the website in a view of 320 x 160 in this example.

The above will allow the mobile website developer to build a site which fits the phone screen. For example you will hide the sidebar if your screen is smaller than 321 pixel. He will use a media query for this probably: @media (max-width:320px){#sidebar{display:none;}}. This only works if the site loads in a viewport of 320px width. Without the <meta name="viewport" width="device-width"> or <meta name="viewport" width="320px"> the menu should be visible even when the user zooms cause it loads in a screen of 640 pixels width.

You can read more about all this on: http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html