https://idea-hack.com/courses/lets-understand-various-events-that-are-used-to-implement-processing-according-to-the-users-operation-in-javascript/lessons/how-to-use-matchmedia-method-that-is-convenient-for-detecting-the-orientation-of-the-smartphone-terminal-with-javascript/
https://idea-hack.com/courses/lets-understand-various-events-that-are-used-to-implement-processing-according-to-the-users-operation-in-javascript/lessons/how-to-use-matchmedia-method-that-is-convenient-for-detecting-the-orientation-of-the-smartphone-terminal-with-javascript/

JavaScriptでスマホの端末の向きを検知するのに便利なmatchMediaメソッドの使い方

スマホの端末の向きの変更を検知

JavaScriptでスマホの端末が横向きか縦向きかを検知するにはをmatchMedia()メソッドを利用します。

メソッド

メソッド意味返り値
matchMedia(メディアクエリ)メディアクエリの情報MediaQueryList オブジェクト
matchMedia(メディアクエリ).addListener(処理)メディアクエリに一致した時に処理を実行するなし
matchMedia()メソッド

プロパティ

プロパティ内容
matchMedia(メディアクエリ).matchesメディアクエリに一致するかどうか真偽値

サンプルコード

サンプルコードとして、端末の縦向き・横向きを検知した時に、それに応じて文字列を出力するサンプルコードを紹介します。

Output

スマホ端末の向きの変更を検知して、テキストを出力

Pug
p スマホ端末の向きの変更を検知して、テキストを出力
	div#targetText1
JavaScript
const targetText = document.getElementById('targetText1');
// メディアクエリオブジェクト情報を取得
const mediaQueryList = matchMedia('orientation: portrait');
// メディアクエリが変更されたタイミングで処理
mediaQueryList.addListener((mediaQueryList) => {
	if (mediaQueryList.matches === true) {
		targetText.textContent = 'デバイスの向きが横向きです。';
  } else {
		targetText.textContent = 'デバイスの向きが縦向きです。';
  }
});
インストラクター
コメント

コメントを残す