Thursday 28 February 2013

Media queries being ignored

Are all your media queries failing? You are probably just forgetting to add the meta tag. The code is as follows:

    <meta name="viewport" content="width=device-width">

Then you can use your media queries. They will work.

    @media (max-width: 800px) {
        .titleimg {
            width: 100%;
        }
        .wrapper {
            width: auto;
        }
    }

You will also want to keep in mind that tablet and smartphone vendors will lie about their device's resolution and physical size. This is because of display density differences among devices, and between these devices and the desktop.

You can read more about this on quirksmode.

No comments:

Post a Comment