Created
April 22, 2016 07:41
-
-
Save nekoneko-wanwan/fb526c4e4c54271b3a04fc63db17705a to your computer and use it in GitHub Desktop.
JavaScriptでメディアのサイズを判定する
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var breakPoint = 767; | |
/* 汎用的な関数をまとめて定義 */ | |
var utility = { | |
/** | |
* ウィンドウがスマホサイズ(ブレークポイントより小さい)かどうか | |
* @return {boolean} [規定した閾値以下であればtrue] | |
*/ | |
isSp: function(){ | |
// IE8以下はfalseを返す | |
if (!window.innerWidth){ | |
return false; | |
} | |
// IE9以下 or メディアクエリメソッドが使えない場合はinnerWidthで判定 | |
if(!window.matchMedia){ | |
return (window.innerWidth <= breakPoint) ? true : false; | |
} | |
// メディアクエリメソッドで判定 | |
if(window.matchMedia('(max-width:'+breakPoint+'px)').matches){ | |
return true; | |
} else { | |
return false; | |
} | |
} | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
CSSのメディアクエリでフラグを立てるようにして、JS側ではそれを見るだけ、とするほうがシンプルかもしれない...
例)