VIKINGVyksa
@VIKINGVyksa
front-end developer

Как заставить нормально работать медиа-запросы в ie8?

Есть приложение которое адаптивно под 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-ом.
Просто не применяются стили медиа-запросов при первой загрузге. Применяются только если ресайзнуть браузер.
на телефонах такое не возможно поэтому печаль беда. Может кто сталкивался с этим? Может кто знает?)
  • Вопрос задан
  • 1043 просмотра
Пригласить эксперта
Ответы на вопрос 2
k12th
@k12th
console.log(`You're pulling my leg, right?`);
Ковыряйтесь в respondjs — проблема, очевидно, в этой либе (или в том, как вы ее вызываете).
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы