レスポンシブデザインでも便利な Modernizr

JavaScript

ブラウザ幅で分岐

Bootstrap参考：
xs: 0, sm: 576px, md: 768px,
lg: 992px, xl: 1200px

const mq = [];
mq.mobile  = Modernizr.mq('(max-width: 575px)');
mq.tablet  = Modernizr.mq('(min-width: 576px) and (max-width: 991px)');
mq.desktop = Modernizr.mq('(min-width: 992px)');

if ( mq.mobile ) { モバイル表示のみ処理させたい処理 }
if ( mq.desktop ) { デスクトップ表示のみ処理させたい処理 }

タッチデバイスなら touchイベント、以外は clickイベント

clickイベントはタッチデバイスでも有効だが、touchイベントの方が圧倒的にレスポンス良いのでそちらを使う

var clickEvent = Modernizr.touch ? 'touchend' : 'click';

$('#hoge').on(clickEvent, function () {
  //処理
});

ブラウザが特定のCSS3プロパティやHTML5の機能に対応していたら処理

例) Transitions (CSS3アニメーション) 対応ブラウザのみ実行

if(Modernizr.csstransitions) {
  //処理
}

// 一例
// audio, applicationcache, backgroundsize, borderimage, borderradius,
// boxshadow, canvas, canvastext, cssanimations, csscolumns,
// cssgradients, cssreflections, csstransforms, csstransforms3d,
// csstransitions, draganddrop, flexbox, fontface, geolocation,
// hashchange, history, hsla, indexeddb, inlinesvg, localstorage,
// multiplebgs, opacity, postmessage, rgba, sessionstorage, smil,
// svg, svgclippaths, textshadow, touch, video, webgl, websqldatabase,
// websockets, webworkers

» Modernizr JS object property 一覧 (公式サイト)

---

CSS/Sass

後で追加