SYMMETRIC Web開発ブログ
レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。
※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました

レスポンシブ対応のためのJavaScriptによる2つの切替手法

こんにちは、開発チームの青木です。普段はレスポンシブと同様のマルチデバイス対応を実現する「スマホのサイト制作。PCは自動変換 | alter.js」に携わっています。

今回は、レスポンシブ対応のためのJavaScriptによる2つの切替手法についてお話していきます。

レスポンシブウェブデザインのページで、CSSではメディアクエリを使用して見た目を端末別で分けたが、設置するUIがそれぞれ別になったので、JavaScriptによるイベントも別で付与したいということがあります。 本記事は端末の種類・画面幅によってJavascriptの処理を切り替えたい場合の記述方法のご紹介となります。  

JavaScriptでuseragentを取得して切り替える

    if( /^Mozilla/5.0 ((iPhone;|iPad;|iPod;|Linux; U; Android|Linux; Android)/i.test(navigator.userAgent) ) {
            //スマホ処理
    }else{
            //PC処理
    }

ユーザーエージェントを取得し、iOSの端末とAndroidの端末であるかをチェックして処理を分けています。

スマホ用ブラウザとPC用ブラウザではtouch関係のイベントでプロパティの構造が異なる場合があるため、その処理をきっちり分けてエラーを避ける目的では有効です。 しかし、一般的なレスポンシブではブラウザ幅を参照して画面を切り替えるのが主流ですので、こちらの手法の場合は画面とJavaScriptの処理に整合性がなくなってしまう場合があります。

画面とJavaScriptの処理が一致している必要があるデザインの場合は次の手法を使うことになるでしょう。

JavaScriptで画面幅を取得して切り替える

if (window.matchMedia('(max-width: 767px)').matches) {
    //スマホ処理
} else if (window.matchMedia('(min-width:768px)').matches) {
    //PC処理
}

ブレイクポイントの横幅768pxを境にPCかスマホかを分ける処理です。

参考:レスポンシブサイト用ブレイクポイント考察!時代に適するサイズとは?

実際に使用する場合、画面と機能を一致させるため、この数字はCSSで使用しているメディアクエリの条件と一致させるといいでしょう。 横幅768pxの場合だと、iPadの縦置きの大きさからPC画面が表示されます。 このブレイクポイントについて、一旦iPadを基準で設定しましたがどの数字が正しいかは時代によって変遷します。 実際、現在でもこの設定のままではiPhone XS Maxの大きさで横置きしたときにPC用のJavaScriptの処理が適用され、そこから端末を縦にした場合にスマホ用の画面になったのにタッチイベントに整合性がない状態になってしまいます。 ですので、使用の際には以下のようにロード時とリサイズ時にイベントを付与することになると思います。  

function switchByWidth(){
    if (window.matchMedia('(max-width: 767px)').matches) {
        //スマホ処理
    } else if (window.matchMedia('(min-width:768px)').matches) {
        //PC処理
    }
}

//ロードとリサイズの両方で同じ処理を付与する
window.onload = switchByWidth;
window.onresize = switchByWidth;

  リサイズのイベントは何回でも起こりうるため、上記を設定したうえで整合性を保たせるために前の状態の処理は初期化する等の対策が必要です。 具体例でいえばリサイズを何回もした結果クリックイベントが何個も付与されてしまい、1回のクリックで複数回の同じイベントが発火される等の不具合が発生する等のことが起こります。  

まとめ JavaScriptでの端末別の処理の切り替えについて

ユーザーエージェントでの切り替えの場合は、端末の種類ごとに適切な処理を振り分けることができるので、ユーザーエージェントで表示画面を分けるように設計されたサイトであればマッチしていると言えます。 しかし、実際にはレスポンシブデザインでサイトを制作することがスタンダードであるため、画面幅による切り替えをする場合が多いでしょう。

参考:サイト制作者が語るレスポンシブWebデザインのメリット 画面幅による切り替えは、近年端末が大きくなっていっているため、多くの端末でPC画面でもスマホ画面でも見えるようになってしまい、サイト制作に高度な設計が必要になります。

シンメトリックでは、複雑なJavascriptの処理不要でレスポンシブと同様のマルチデバイス対応を実現する「スマホのサイト制作。PCは自動変換 | alter.js」を提供しています。
スマホ中心のサイト制作、リニューアルをお考えでしたら、ぜひ使ってみてください。

また、モバイルファースト基準のLP制作サービス「スマホからLP制作」も展開しています。
こちらもご興味ありましたら是非お問い合わせください。

Page Top