cssとjsのブラウザ幅判定を合致させる方法

仕様が違うって困る。

先に結論

cssでこうだったとして

@media screen and (max-width:1200px) {
}

js（jQuery）はこうする

$(window).on('load resize', function(){
    if(window.matchMedia('(max-width:1200px)').matches){
    }
})

matchMediaでやるのが一番安定する。

連携活用について

単純なデザインだけならcssで完結するんだけどね。併用しなきゃいけない場合、スクロールバーの幅を無視するか否かで微妙にズレが出たりしてめちゃくちゃめんどい。innerWidthが最適解みたいなときもあったんだけどやっぱズレるし、ズレの修正はブラウザとかOSとかでも変わるから実数値をぶち込んでの調整はできない。ってことで、ぴったんこな条件記述を探さないといけない。