2015/09/16
javascriptで「window.matchMedia」があるというのを今更知った件
レスポンシブのサイトをコーディングする際、javascriptでSPの時だけ動かしたいことや、SPの時にjavascriptを使って制御しなきゃいけない時に、今までは以下の用に書いていました。
(jQuery使用)
1 2 | if($(window).width() < 480){ } |
ブラウザの幅を取得してそのサイズによって処理を変えるというやり方です。
しかし、つい最近window.matchMediaという存在を知りました。
これは、いわゆるcssのmediaqueryのjavascript版というもので、
以下の用に書きます。
1 2 3 4 5 | if( window.matchMedia('(max-width:480px)').matches ){ //480以下の時の処理 }else{ //480以上の時の処理 } |
ただ、chrome,firefoxは問題ないのですが、IE10以上からでないと効かないそうです。
IE9以下でも使いたい場合は、
paulirish/matchMedia.js · GitHub
こちらのプラグインを使うと使用可能になるそうです。
とはいえ、レスポンシブなのでIE9で動かないとしても問題ないかと思います!
さすがにie9を縮小して見る人はいないでしょうから・・・(いるのかな??)
Author Profile
スターフィールド編集部
SHARE