目次
SPとPCで分ける場合
単純にスマートフォンとPCで表示をわけたいという場合の方法です。方法は色々ありますが、単純に、最初全てを非表示しておき、ユーザーエージェントを判断して表示するという方法です。
HTMLには、それぞれの内容を書いたdivを2つ用意しておきます。
1 2 3 4 5 6 7 8 |
<div class="spUser"> スマートフォンで表示する内容が入ります </div> <div class="pcUser"> スマートフォン以外で表示する内容が入ります </div> |
あらかじめcssで、SP表示、PC表示の両方を非表示にしておきます。
1 2 3 4 5 6 |
.spUser, .pcUser { display :none; } |
スマートフォンのユーザーエージェントを取得して、.spUserのdivを表示します。
それ以外の場合は、.pcUserのdivを表示します。
1 2 3 4 5 6 7 8 9 10 |
var $ua = navigator.userAgent; $(function(){ if($ua.indexOf('iPhone') > 0 || $ua.indexOf('iPad') > 0 || $ua.indexOf('iPod') > 0 || $ua.indexOf('android') > 0 || $ua.indexOf('BlackBerry') > 0 || $ua.indexOf('windows Phone') > 0 || $ua.indexOf('NOKIA') > 0 || /Mobile.*Firefox/.test($ua)){ $('.spUser').show(); } else { $('.pcUser').show(); } }); |
さらに細かく分ける方法
例えば、androidとiPhoneでボタンの表示を変更する場合や、WindowsとMacで表示を変更する場合があります。その場合、先ほどのスマートフォンとそれ以外という分け方では対応できませんので、さらに分岐を増やします。
さらに、先ほどは、showでdisplay:block;を当てて表示させたのに対して、classをhtml、もしくはbodyに付与しておき、cssで今度は隠すという方法にしてみます。
同じく、HTMLにはdivを2つ用意しておきます。
1 2 3 4 5 6 7 8 |
<div class="spUser"> スマートフォンで表示する内容が入ります </div> <div class="pcUser"> スマートフォン以外で表示する内容が入ります </div> |
CSSは、このような表示にして、対象となるユーザーエージェントの場合に、一方のコンテンツを表示しないというようにします。
1 2 3 4 5 6 7 8 9 10 11 12 |
.iphone .pcUser, .android .pcUser, .otherDevices .pcUser { display: none; } .mac .spUser, .win .spUser { display: none; } |
ユーザーエージェントを分岐しました。AndroidとiPhoneと、それ以外のスマートフォンと、さらに、windorsとmacも分岐しました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$(function() { var $root = $("html,body"), $ua = navigator.userAgent; if ($ua.indexOf('iPhone') > 0 || $ua.indexOf('iPad') > 0 || $ua.indexOf('iPod') > 0) { $root.addClass('iphone'); } else if ($ua.indexOf('android') > 0) { $root.addClass('android'); } else if ($ua.indexOf('BlackBerry') > 0 || $ua.indexOf('windows Phone') > 0 || $ua.indexOf('NOKIA') > 0 || /Mobile.*Firefox/.test($ua)) { $root.addClass('otherDevices'); } else { if ($ua.indexOf('mac') > 0) { $root.addClass('mac'); } else if ($ua.indexOf('windows') > 0) { $root.addClass('win'); } } }); |
勉強したこと
ユーザーエージェントが文字列がある場合の判断はこれ
1 2 3 |
navigator.userAgent.indexOf('ここにユーザーエージェントの文字列') > 0 |
FirefoxOSについては、PCのFirefoxとかぶらないように、正規表現で
1 2 3 |
/Mobile.*Firefox/.test(navigator.userAgent) |
とします。
1 2 3 |
.test(navigator.userAgent) |
これは、正規表現で、trueとfalseをみるときに使う表現らしいです。