对不支持CSS媒体查询的浏览器使用Javascript

Question

I'm working on a project and I have been researching various approaches to responsive layouts by using media queries. One of the many things I've been thinking about is browsers that don't support them, Internet Explorer versions 5.5 - 8 in particular ( source ) and using Javascript as a fallback method with options such as css3-mediaqueries.js or respond.js .

I'm not looking to know which is best to use out of the two but questioning how much of a necessity it is to even use them.

The way I'm seeing it right now is, if you're using a handheld device (mobile or tablet) you're most likely using a browser which supports media queries, since I'd imagine, most of these devices browsers are modern and were built with media queries in mind. So if a user is viewing the website in an old IE browser it is most likely going to be on a desktop computer with (in theory) a desktop sized monitor. Which means they'd see the base grid defaults of the css files anyway. Which makes me think there can't be a huge need to try and support someone, who for whatever reason, has an old version of IE with a handheld sized screen.

But at the same time, there must be a need for these Javascript files or they wouldn't be used by so many sites. The only reason I can see the need for them is for the browsers that don't read media queries, that they may cause problems when trying to read the media query and throw errors or inconsistencies in the layout.

I was just wondering if someone could shed some light on to it and help give me a better understanding of why they should be used, I'm not closed from the idea of using them I just don't see the need, but it is probably because I am missing something.

Answer 1

Personally, I've never tried to replicate a mediaquery in a browser that doesn't support it. In cases where I've had to support a non-css3 browsers on a site that has mediaqueries, I've always just fixed the width for the non-css3 version via a css conditional comment, because as you say, a phone or tablet is likely to have support.

However, media queries aren't only helpful for creating mobile friendly designs, but also fluid designs that are perhaps made for a 1200px or even 1600px wide display but still need to be workable on a 1024px screen. In this example, it's more likely that an old browser is being run on a smaller screen, so a media query would be really useful. In this example one of these libraries would be useful.

Hope that helps.

Answer 2

I build a lot of websites for fortune 100 clients. For the most part, we don't use these js plugins. It really depends on a few things:

1. Did you build your css mobile first or desktop first? If mobile first, IE8 and below will see the mobile view (which isn't optimal). If you build desktop first, they see the desktop view.
2. How much funkiness can you support? Most clients want it to work in ie8 but that's about it. Most everybody has completely abandoned ie7 and below. The average website isn't perfect in ie8. So long as the end user can get the content, that's usually all that matters with regards to ie8. Some clients may completely disagree though.
3. Do you have a compelling reason to use it or to avoid it? This is usually the most important one. Pull up the site in ie8 and if not having media queries completely breaks it, try it with respond.js and see how it looks.

It's incredibly simple to include it and if you use conditional statements, it won't even attempt to be loaded on newer browsers.

<!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<!-- <![endif] -->

Basically, just look at it on a per site basis. If it helps, use it. If it doesn't, ignore it.