Всем привет.
Интересная проблема.
При расширении 533 пикслей ширины, я с помощью медиа-запросов показываю DIV.
После того как блок показан, я выполняю эту функцию.
Проблема в том, что в Google Chrome и Firefox, по разному отображают.
В Firefox может появиться сначала меню при 520 пикселей, а в Google Chrome, с разницей в 2 пикселя.
function windowSize(){
//Сюда писал и ($(document).width() и ($(document.body).width() и ($(window).width()
if ($(".header-wrap").width() > '520'){
$('ul.navigation').show();
} else {
$('ul.navigation').hide();
}
if ($(".header-wrap").width() > '10'){
$('.header-wrap').removeClass("height207");
} else {
}
}
$(window).on('load resize',windowSize);
|
Код:
|
@media (max-width: 533px) {
.collapse-nav{
width: 48px;
heigt: 49px;
background: url(../images/callapse.png) #5ac1a2 no-repeat;
position: absolute;
right: 10px;
top: 6px;
cursor: pointer;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
} |
Как мне добиться одинакового результата в обеих браузерах?
И почему не совпадают цифры?
Почему медиа-запрос срабатывает при 533, а JS не сработает при тех же размерах,
если в скрипте задать 533 пикселей(if ($(".header-wrap").width() > '533'){)?
