CSSメディアクエリと同じように、スクリーンサイズ毎にJavaScriptで条件分岐

DOM

概要

　閲覧数:492 　投稿日:2017-05-09 　更新日:2017-05-09 　

CSSのMedia Queriesと同じように、スクリーンサイズによってJSで条件分岐するためには？
・window.matchMediaを使用する

コード

//例1.CSS。@media only screen and (min-width:768px) {
if (window.matchMedia('screen and (min-width:768px)').matches) { //768px以上のデスクトップでの処理 
}else{ //スクリーンサイズが768pxより小さい時の処理
}

//例2.CSS。@media only screen and (max-width: 640px) {
if (window.matchMedia('screen and (max-width: 640px)').matches) { //640px以下のモバイルでの処理
}


結果

-


タグ


matchMedia　


リンク


window.matchMedia


指定要素の全ての子要素除去後、子要素リスト末尾へ指定要素追加



類似度ページランキング
順位 ページタイトル抜粋 ％
1 CSSメディアクエリと同じように、スクリーンサイズ毎にJavaScriptで条件分岐 86
2 URLで条件分岐 20
3 spilitで、指定した内容で分割できないときの戻り値は、["対象文字列"] 18
4 オブジェクトから JSON へ変換。JSON.stringify() メソッドを利用 17
5 json 文字列を JSON.parse() メソッド(推奨)を使ってオブジェクトへ変換 16
6 現在日時を、dateオブジェクトとして取得 16
7 テーブルタグと内容を作成して追加 ／ insertRow 14
8 json 文字列を eval 関数(セキュリティリスクあり)を使ってオブジェクトへ変換 14
9 文字列内のテキストを正規表現で置換。その際、エスケープ使用 14
10 オブジェクトを生成し、アクセス 14
11 オブジェクトのキーとして、配列からランダムな値を取得して使用 14
12 現在日時を、「1970年1月1日0時0分0秒（UTC）からの経過秒数」として、ミリ秒単位で取得 13
13 オブジェクトのキーとして、変数の値を使用 13
14 「二つ置き」毎に結果が7増加するよう数字を表示 12
15 配列をネストしたオブジェクトを生成し、アクセス 12
16 配列を、アルファベット順(文字コード順)に並べ替え 12
17 クリックした要素のid名を取得 ／ クリックした要素のクラス名を取得 11
18 テーブルタグと内容を作成して追加 ／ for 9
19 文字列を、指定した区切り文字で分割し、配列へ格納 9
20 桁数規則に沿った数値文字列を、正規表現で年月日表示 9
2025/11/05 9:27 更新
週間人気ページランキング ／ 10-29 → 11-4
順位 ページタイトル抜粋 アクセス数
1 クリックした要素のid名を取得 ／ クリックした要素のクラス名を取得 | クリック(イベント) 5
2 オブジェクト内配列より、重複しない値を取得して、新たな配列を生成 | オブジェクト 1
2 spilit | タグ毎エントリー一覧 1
2 firstChild | タグ毎エントリー一覧 1
2 JavaScriptコード 1
2 json 文字列を JSON.parse() メソッド(推奨)を使ってオブジェクトへ変換 | JSON 1
2 ログイン 1
2 replace | タグ毎エントリー一覧 1
2 ゲストコメント一覧ページ 1
2 String | タグ毎エントリー一覧 1
2 RegExp | タグ毎エントリー一覧 1
2 算術演算子(演算子) カテゴリー 1
2 valueOf | タグ毎エントリー一覧 1
2 正規表現(テキスト処理) カテゴリー 1
2 三項演算子(演算子) カテゴリー 1
2025/11/5 1:02 更新