CODEWITHSUNDEEP
twitter-bootstrapresponsive-designmedia-queries
Soundar Rathinasamy
Soundar Rathinasamy

Reputation: 6728

why Respond.js and CSS3-mediaqueries.js both are not working in IE 7 & 8 for me?

I am building a HTML page with Twitter Bootstrap version 2.3.0. Since IE less than 9 does not support media queries I tried to use css3-mediaqueries.js. The documentation says you need to just include the script after all css. I did that. Below is my page layout.

   <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="description" content="Responsive page">
      <meta name="author" content="Author name">
      <title>Responsive page built on Twitter Bootstrap</title>
      <link href="css/bootstrap.min.css" rel="stylesheet" type='text/css'>
      <link href="css/bootstrap-responsive.min.css" rel="stylesheet" type='text/css'>
      <link href="css/my-page.css" rel="stylesheet" type='text/css'>
      <link href="css/my-page-responsive.css" rel="stylesheet" type='text/css'>
     </head>
     <body>
       <div class="container">
         <!-- My html goes here -->
       </div>
       <!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
        </script> <![endif]-->
     </body>
    </html>

But still no luck. I have not used any HTML5 element in my page. There is no error logged in javascript console.

Then I tried to use respond.js which throws the below exception. 

Unspecified error.
respond.js, line 309

What I am doing wrong here?

Upvotes: 4

Views: 7335

Answers (3)

Rajnikant Kakadiya
Rajnikant Kakadiya

Reputation: 2265

Add respond.js before closing </body> tag. Also, Please check your pages inside localhost otherwise it will throw Error. I have used that way in many sites and it's working fine in IE7 and IE8.

Upvotes: 0

Akshaya Raghuvanshi
Akshaya Raghuvanshi

Reputation: 2277

Respond.js is mandatory if you want to use media queries in IE8. This is the polyfill that enables media queries for browsers like IE. Another good alternative is adapt.js . Hope this will help you.

Upvotes: 0

Michael Irigoyen
Michael Irigoyen

Reputation: 22947

You need to still place the script in your <head>, just after you stylesheets. Placing it at the bottom of the document causes the page to render before the script is loaded into memory.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Responsive page">
  <meta name="author" content="Author name">
  <title>Responsive page built on Twitter Bootstrap</title>
  <link href="css/bootstrap.min.css" rel="stylesheet" type='text/css'>
  <link href="css/bootstrap-responsive.min.css" rel="stylesheet" type='text/css'>
  <link href="css/my-page.css" rel="stylesheet" type='text/css'>
  <link href="css/my-page-responsive.css" rel="stylesheet" type='text/css'>
  <!--[if lt IE 9]>
  <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  <![endif]-->
</head>

Upvotes: 4

Related Questions