クリエイター：コーディング備忘録ブログ

RSS

コーディング

デバイスサイズなどでjsの条件分岐

2018.09.14

レスポンシブサイトでは、pcやタブレット、スマートフォンなどで見え方やデザインが大きく変わったり、処理したいプログラムを変更したい場合があるかと思います。

今回はブレイクポイントごとににJavaScriptの切り替える方法を紹介します。

<script type="text/javascript">
jQuery(document).ready(function($) {
    
    if (window.matchMedia( '(min-width: 960px)' ).matches) {
$(function(){
    //960px以上で処理したい内容
});
    } else {
$(function(){
    //960px以下で処理したい内容
});
    };
});

1

2

3

4

5

6

7

8

9

10

11

12

13

<script type="text/javascript">

jQuery(document).ready(function($) {

if (window.matchMedia( '(min-width: 960px)' ).matches) {

$(function(){

//960px以上で処理したい内容

});

} else {

$(function(){

//960px以下で処理したい内容

});

};

});

これを利用すれば、グローバルナビゲーションのpcからスマホ表示まで、
変更を十何にすることができます。

この記事を見た人は次の記事も見ています。

IEなどでフォントサイズcalc(% + vw)の計算

前の記事

jqueryのみでrssを読み込み

次の記事

コメント

0 コメント
0 トラックバック

この記事へのコメントはありません。

最近の投稿

アーカイブ

RELATED

コーディング

複数のカスタム投稿に共通のカスタムタクソミーを設定する

2018.12.18

コーディング

illustratorでグラフを作成

2021.08.04

コーディング

cssで鏡像をつくる

2017.08.30

コーディング

WP:アイキャッチ画像の有効化

2017.08.10

コーディング

インスタキーのみでインスタグラムをサイトに表示

2018.08.31

コーディング

第二十九回「PostExpirator プラグインで公開期限付き投稿」

2016.05.19