WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

スマホで見た時にjQueryを無効・有効にする(ユーザーエージェントで判別する方法)

前回の授業では

if($(window).innerWidth() <= 767){
  
  };

のようにwindowの横幅を基準に条件分岐させるパターンをやりました。

今回のやり方はユーザーエージェントでスマホかPCか判別してやる方法です。

ユーザーエージェント

ユーザーエージェント(UserAgent)とはウェブサイトに訪問する際「Google Chromeからアクセスしています」「iPhoneからアクセスしています」などのどんな環境でアクセスしているのかの利用者の情報のことを言います。
ウェブサイトにアクセスする際にはこのユーザーエージェントを必ず送ることになっています。


今回のパターンはPC・タブレットであればjQueryを有効に。スマホiPhoneAndroid)であればjQueryを無効にします。
「!」エクスクラメーションマーク (exclamation mark)とは、Javascriptでは否定の意味で使われます。

if(!navigator.userAgent.match(/(iPhone|Android)/)){
$(function(){
//ここにjQueryの記述
});
}


逆にPC・タブレットであればjQueryを無効に。スマホiPhoneAndroid)であればjQueryを有効の場合

if(navigator.userAgent.match(/(iPhone|Android)/)){
$(function(){
//ここにjQueryの記述
});
}

また、PCであればjQueryを無効に。スマホiPhoneAndroid)とタブレット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)">