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

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