ユーザーエージェントを利用して表示を振り分ける方法

SPとPCで分ける場合

単純にスマートフォンとPCで表示をわけたいという場合の方法です。
方法は色々ありますが、単純に、最初全てを非表示しておき、ユーザーエージェントを判断して表示するという方法です。

HTMLには、それぞれの内容を書いたdivを２つ用意しておきます。

あらかじめcssで、SP表示、PC表示の両方を非表示にしておきます。

スマートフォンのユーザーエージェントを取得して、.spUserのdivを表示します。
それ以外の場合は、.pcUserのdivを表示します。

さらに細かく分ける方法

例えば、androidとiPhoneでボタンの表示を変更する場合や、WindowsとMacで表示を変更する場合があります。
その場合、先ほどのスマートフォンとそれ以外という分け方では対応できませんので、さらに分岐を増やします。

さらに、先ほどは、showでdisplay:block;を当てて表示させたのに対して、classをhtml、もしくはbodyに付与しておき、cssで今度は隠すという方法にしてみます。

同じく、HTMLにはdivを２つ用意しておきます。

CSSは、このような表示にして、対象となるユーザーエージェントの場合に、一方のコンテンツを表示しないというようにします。

ユーザーエージェントを分岐しました。AndroidとiPhoneと、それ以外のスマートフォンと、さらに、windorsとmacも分岐しました。

勉強したこと

ユーザーエージェントが文字列がある場合の判断はこれ

FirefoxOSについては、PCのFirefoxとかぶらないように、正規表現で

とします。

これは、正規表現で、trueとfalseをみるときに使う表現らしいです。