「Light TALK Plus＋」とは…

ブレイクポイントにおける問題

レスポンシブ対応のサイト制作をする際にはブレイクポイントを考える必要性があります。
ブレイクポイントとは「表示を切り替える横幅」のことを差しますがパソコンやスマホ、タブレットなどデバイスごとに横幅は異なり、デバイスに合わせてデザインも変化させていく必要性があります。
CSSで切り替えることがでるのですが、様々なデバイスが出現することによってブレイクポイントだけでデザインを構成することが難しい場合もあります。

例えば画面解像1280px ✕ 800px のパソコンと画面解像度 1024px ✕ 1366px のiPad Pro 12.9 があります。
ブレイクポイントの横幅は 1280px と 1024px と異なるので異なるレイアウトに切り替えることができます。

しかし、iPad Pro の場合には画面が縦向きと横向きによって切り替わるので横幅が 1366px になることもあります。
その場合、横幅が 1280px のパソコンと同じデザインになってしまいます。
異なるデザインにしたい場合でも、iPad Pro がパソコンよりも横幅が大きいので切り替えることが不可能になってしまう問題が発生してしまいます。

JacaScriptによるデバイス判定

そこでユーザーエージェントでスマホかPCか判別する方法を用います。
下記のコードを JavaScript ファイルに記載することでデバイスごとにデザインを切り替えることが可能になります。

if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
//ここに変更したい内容を記載
}

また、このコードはnavigatorの前に「!」をつけることでデバイスごとに無効にすることもできるようになります。

if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
//ここに無効にしたい内容を記載
}

デバイスごとに使用を考える

JavaScript を用いればデバイスにデザインを切り替えることができますがデバイスによって異なるのはデザインだけではありません。
イベントも異なってきます。
パソコンだとマウスホバー、スマホや iPad だとタッチイベントなどがあり、それぞれのデバイスに合わせたデザインを構築しなければなりません。
今回、紹介したコードはデバイスごとに切り替えが簡単にできるのでレスポンシブ対応のサイト制作に活用してただければと思います。