Есть приложение которое адаптивно под ie8.
Открывает index.html в браузере и всё ок.
Когда я подгружаю его через фрейм то начинаються проблемы.
Фрейм я растягиваю на 100% ширины и высоты корневого окна.
Когда он загружается то стили медиа-запросов не применяются, ниодин запрос не сработал. Чуть двину рамку окна сразу всё подстраивается и работает.
выглядит это примерно так
<!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>
Медиа-запросы вот такие
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;
}
}
Всё работает в хрома, яндексе и тд. не работает лишь в ie ниже 10. Поддержка я добавил respondjs-ом.
Просто не применяются стили медиа-запросов при первой загрузге. Применяются только если ресайзнуть браузер.
на телефонах такое не возможно поэтому печаль беда. Может кто сталкивался с этим? Может кто знает?)
Простой
