Responsive Web Design and high resolution displays (iPhone 4/5)

Question

I have recently started toying around with responsive web design and have done a basic test here:

http://test.studev.net/

It works fine in a desktop browser

Answer 1

You can choose the size of the font according to the screen-width:

    /* Large desktop */
    @media (min-width: 1200px) {
        font-size: 18px;
    }

    /* Portrait tablet to landscape and desktop */
    @media (min-width: 768px) and (max-width: 979px) {
        font-size: 16px;
    }

    /* Landscape phone to portrait tablet */
    @media (max-width: 767px) {
        font-size: 14px;
    }

    /* Landscape phones and down */
    @media (max-width: 480px) {
        font-size: 12px;
    }

To make sure your layout stretch on the mobile screen you have to use the viewport meta tag:

This meta tag needs to be inside the head tag. The "device-width" will be the maximum pixels your screen can show. You can also set a constant value there (600px).

The initial-scale=1 means it will be zoomed automatically to 100%. (0.5 => 50%)