- Tip 1: Use 'Mobile First' Media Queries
- Tip 2: Support Older IE Versions with a Polyfill
- Tip 3: Use a Very Wide Header Image to Suit Multiple Screen Widths
- Tip 4: Use Viewport Meta Sparingly, and Let Users Zoom
- Tip 5: Serve Larger Images for High-Resolution Displays
- Tip 6: Avoid Using Images and Other Separate Asset Files
- Summary
Tip 2: Support Older IE Versions with a Polyfill
One problem with using the "mobile first" technique is that older browsers that don't support media queries will be stuck with the mobile/narrow screen layout, because that's the default layout, applied before any media queries kick in. This really isn't what you want for IE 6–8 on the desktop!
To get around this issue, use a JavaScript polyfill to add media-query support to browsers that don't support it natively. The best two polyfills for this purpose are as follows:
- css3mediaqueries.js is larger, but it supports a wider range of queries.
- respond.js is smaller, but it supports only width and height media queries.
Basically, you should use respond.js unless you need wider media query support.