ECサイト構築・リニューアルならクラウド型ECサイト構築ASPサービスサイトへ
資料請求
TOP

CATEGORY

SERVICE

【jQuery】レスポンシブなサイトで、デバイスサイズで適用させるjavascriptを切替

【jQuery】レスポンシブなサイトで、デバイスサイズで適用させるjavascriptを切替

レスポンシブウェブデザインではCSS(スタイルシート)を画面の横幅に応じて設定したブレイクポイントを切り替えることで、HTMLコンテンツの見た目を調整しています。CSSではメディアクエリを利用してこの切り替えを実施していますが、JavaScriptの切り替えはどのように行えばよいのでしょうか?

今回はレスポンシブウェブデザインでブレイクポイント毎にJavaScriptの切り替えを実現するjQueryの実装方法をご紹介します。

実装例

実装例は以下になります。

<script type="text/javascript">
jQuery(document).ready(function($) {
	//600px以上の場合
	if (window.matchMedia( '(min-width: 600px)' ).matches) {
$(function(){
    $("#sample").mouseover(function(){
        $(this).toggleClass('pc');
    });
});
	//600px以下の場合
	} else {
$(function(){
    $("#sample").mouseover(function(){
        $(this).toggleClass('smartphone');
    });
});
	};
});
</script>

#sampleセレクタに対してデバイス幅に応じて付与するclassを変更させる記述です。これにより、例えばトグルメニューの見せ方をデバイスの幅によって変えることができ、より柔軟な実装が可能になります。

他にも、設定するjavascriptにより、アイディア次第で応用を効かせることもできます。

終わりに

レスポンシブウェブデザインではCSSでデバイス毎の調整を実現していますが、JavaScriptもデバイス幅に応じた調整が可能です。サイトの表現幅を広げる方法ですので、是非一度お試しください。

                   
商品の販売に“夢中”になれる
クラウド型ECサイト構築ASP

ECサイト構築、リニューアルを2000社以上支援してきた知見から
ECの専門家として御社のEC事業成長をサポートします。

  • 導入実績2000社以上


    導入実績

  • 注文単価増加率114%

    導入1年後の
    注文単価
    増加率

  • 売上成長率128%

    導入1年後の
    売上成長率

  • EC支援歴20年


    EC支援歴

         

レスポンシブWebデザインカテゴリの最新記事