Wednesday, March 19, 2014

Responsive Design Issues and it's Solution in Internet Explorer( IE )

If you have worked on making an existing site to responsive then you might have faced some problems related to browser compatibility. Recently I was working on making a site responsive and I faced few challenges and I'm going to describe those below:

  • My responsive design working perfectly in FF and Chrome but in any version of IE it's not working. So, what is the issue?

First go to the header of your HTML page and if you have DOCTTYPE declaration like below
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

then change it to "<!DOCTYPE html>" because this one supports HTML 5 standard and responsive design is a HTML 5 feature.

  • Search for meta tag "X-UA-Compatible"
In my case my project has this meta tag with value "IE=8". So, what does it mean?? It forces the browser to load the content with IE=8 compatible mode and IE=8 doesn't support responsive, so my responsive design was not working.

What is the solution for it?? Ans: Change that meta tag value to "IE=edge". This means it sets the browser to load in latest standard. For more details about it go through this: http://www.chromium.org/developers/how-tos/chrome-frame-getting-started

  • Now, my responsive design is working fine in FF, Chrome and IE9+ but what about IE8 and below version browsers?? Is there any work around for it?
Normally IE8 and below browser doesn't support responsive styles like media and all these things, to make it work in those browsers few JavaScript libraries are available and using that you can get that benefit. Following are the JavaScript libraries we can use to make it work:


1 comment:

Followers