How to make media queries work fine in ie8?

A

Andrey Dyrkov2015-11-10 17:46:03

css

Andrey Dyrkov, 2015-11-10 17:46:03

There is an application that is adaptive for ie8.
Opens index.html in the browser and everything is ok.
When I load it through a frame, problems begin.
I stretch the frame to 100% of the width and height of the root window.
When it loads, no media query styles are applied, none of the queries work. Slightly move the frame of the window, everything immediately adjusts and works.
it looks like this

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
       <style>
         html,body{height:100%;}
       </style>
</head>
<body>

  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio cupiditate, a natus.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi consequuntur illo dolorum, quas eos temporibus ab, minima, consectetur explicabo quibusdam eius incidunt labore reiciendis non. Ex cum odio amet, architecto!</p>
         
        //фрейм растягивается на всю страницу но медизапросы в нём срабатывают только при небольшом ресайзе страницы. В ХРОМЕ  РАБОТАЕТ, только в IE8 нет.
  <iframe src="app.html" width="100%" allowtransparency="true" frameBorder="0" heihgt="100%" ></iframe>


</body>
</html>

Media queries are like this

SASS
/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media screen and (min-width : 320px){
  .sidebar{
    width:100%!important;
    .tab{
      label{
        display: none!important;
      }
      i{
        display: block!important;
      }
    }
    .tabs-content{
      padding:15px 15px 80px 22px!important;
      .videos{
        .video{
          .video_frame{
            height:150px!important;
          }
        }
      }
    }
  }
  .mobile-exit{
    display:block!important;
  }
  .nav{
    right:360px!important;
  }
}

/* Extra Small Devices, Phones */
@media screen and (min-width : 480px) {
  .sidebar{
    width:100%;
    .mobile-exit{
      display:none!important;
    }
    .tab{
      label{
        display: block!important;
      }
      i{
        display: none!important;
      }
    }
    .tabs-content{
      padding:15px 15px 80px 22px!important;
      .videos{
        .video{
          .video_frame{
            height:200px!important;
          }
        }
      }
    }
    .mobile-exit{
      display:block!important;
    }
  }
  .nav{
    right:380px!important;
  }
}

/* Small Devices, Tablets */
@media screen and (min-width : 768px) {
  .sidebar{
    width:470px!important;
    .tabs-content{
      padding:15px 15px 80px 15px!important;
      .videos{
        .video{
          .video_frame{
            height:250px!important;
          }
        }
      }
    }
    .mobile-exit{
      display:none!important;
    }
  }
  .nav{
    right:490px!important;
  }
}

/* Medium Devices, Desktops */
@media screen and (min-width : 992px) {
  .sidebar{
    width:630px!important;
  }
  .nav{
    right:650px!important;
  }
}

/* Large Devices, Wide Screens */
@media screen and (min-width : 1200px) {
  .sidebar{
    width:630px!important;
  }
  .nav{
    right:650px!important;
  }
}

Everything works in chrome, Yandex and so on. does not work only in ie below 10. I added support by respondjs.
It just doesn't apply media query styles on first load. Applied only if the browser is resized.
this is not possible on phones, so sadness is a disaster. Who can faced it? Maybe someone knows?)

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

K

Konstantin Kitmanov, 2015-11-10
@k12th

Poke around in respondjs - the problem is obviously in this lib (or how you call it).

Z

zooks, 2015-11-10
@zooks

How to make it responsive for IE8