enquire
.register('screen and (min-width: 1200px)', {
match: function() {
active_li_margin_left = $('li.active').css('margin-left')
active_li_width = $('li.active').width()
console.log(active_li_margin_left, active_li_width)
zwarovsky();
}
})
.register('screen and (min-width: 980px) and (max-width: 1199px)', {
match: function() {
active_li_margin_left = $('li.active').css('margin-left')
active_li_width = $('li.active').width()
console.log(active_li_margin_left, active_li_width)
zwarovsky();
}
})
li.active の幅が 770px から 620px に変更され、margin-left が -30px から -20px に変更されました。これはブートストラップの span8 項目です。
問題: inquire は css メディア クエリの直前に関数を起動しているように見えるため、ウィンドウのサイズを変更すると以前の値が取得されます。
1200 から 980 に切り替えると、ブラウザー ウィンドウのサイズを変更すると、コンソール ログは 20px 660 ではなく 30px 770 を表示し、980 から 1200 に戻すと、コンソール ログは 20px 620 を表示します。