前回の授業では
if($(window).innerWidth() <= 767){ };
のようにwindowの横幅を基準に条件分岐させるパターンをやりました。
今回のやり方はユーザーエージェントでスマホかPCか判別してやる方法です。
ユーザーエージェント
ユーザーエージェント(UserAgent)とはウェブサイトに訪問する際「Google Chromeからアクセスしています」「iPhoneからアクセスしています」などのどんな環境でアクセスしているのかの利用者の情報のことを言います。
ウェブサイトにアクセスする際にはこのユーザーエージェントを必ず送ることになっています。
今回のパターンはPC・タブレットであればjQueryを有効に。スマホ(iPhone・Android)であればjQueryを無効にします。
「!」エクスクラメーションマーク (exclamation mark)とは、Javascriptでは否定の意味で使われます。
if(!navigator.userAgent.match(/(iPhone|Android)/)){ $(function(){ //ここにjQueryの記述 }); }
逆にPC・タブレットであればjQueryを無効に。スマホ(iPhone・Android)であればjQueryを有効の場合
if(navigator.userAgent.match(/(iPhone|Android)/)){ $(function(){ //ここにjQueryの記述 }); }
また、PCであればjQueryを無効に。スマホ(iPhone・Android)とタブレット(iPad)であればjQueryを有効の場合
if(navigator.userAgent.match(/(iPhone|iPad|Android)/)){ $(function(){ //ここにjQueryの記述 }); }
このように「|」で区切って自身でユーザーエージェントを追加する事も出来ます。
さらに場合によってはプラグイン用のcssも不要になる事もあります。その時はメディアクエリーを該当するcssファイル内に記述しましょう。
例:640px以上の時だけ「style.css」を適用させる
<link rel="stylesheet" href="style.css" media="screen and (min-width:640px)">