今回の記事は、
画面の横幅サイズを元に、たとえば
スマホサイズの時はAを実行させ、
タブレットサイズの時はBを実行する、
という事を行いたい場合。そんな時に使える方法についての記事です。

これは、javascript単体で、結構簡単な仕組みで実現できます。

window.innerWidth;

↑こちらを使って画面のViewportの横幅を取得、
ブレイクポイントの値と比較するだけです。(※レイアウトビューポートを比較すれば良い場合)
では、次のセクションで詳しく書いていきます。

コードなど

  const mobileWidth = 414;
  const tabletWidth = 768;
  const pcWidth = 1024;
  const wideScreenWidth = 1366;

  const myWidth = window.innerWidth;
  
  if( myWidth < mobileWidth ) {
    // 414px以下 の場合に実行
    console.log('iPhone Plus系より小さい端末');
  } else if( myWidth > mobileWidth && myWidth <= tabletWidth ) {
    // 414pxより大きい かつ　768px以下 の場合に実行
    console.log('iPhone Plus系より大きくiPad系タブレットまでを含む端末');
  } else if( myWidth > tabletWidth && myWidth <= pcWidth ) {
    // 768pxより大きい かつ　1024px以下 の場合に実行
    console.log('iPadより大きくiPad Proまでを含む端末');
  } else if( myWidth > pcWidth && myWidth <= wideScreenWidth ) {
    // 1024pxより大きい かつ　1366px未満 の場合に実行
    console.log('1024px〜1366pxまでのウインドウサイズ');
  } else if( myWidth >= wideScreenWidth ) {
    // 1366pxより大きい場合に実行
    console.log('1366pxを超えるウインドウサイズ');
  } else {
    return;
  }

↑見ていただくとわかるかと思うのですが、やっている事はいたってシンプルです。
6行目で window.innerWidth; を使用、変数に格納。
はじめの1~4行目で定義してある、ブレイクポイントの各値と比較しています。

上記の例にあるブレイクポイントは一例ですので、
案件に応じて適切なブレイクポイントに変更しても、もちろん問題ありません。
なお、1366pxというのは、少し前までシェアを占めていたPCのモニタサイズです。
2021年現在、シェア1位を占めるモニタサイズは1920pxに変わっている模様で、1366pxは2位とのことです( ※出典：ディスプレイサイズなど、様々なWebの統計を調べることができる Statcounter Global Stats | https://gs.statcounter.com/ より。 )。

ユーザー操作によってブラウザ幅が変更された場合

ユーザーがウインドウを拡大縮小したタイミングでブラウザの幅を検知、
何かを実行する場合は、次の様に書きます。
window.addEventListener('resize', ...
として、リサイズイベントを監視するという方法です。

const mobileWidth = 414;
const tabletWidth = 768;
const pcWidth = 1024;
const wideScreenWidth = 1366;

window.addEventListener('resize', () => {
  const myWidth = window.innerWidth;
  if( myWidth < mobileWidth ) {
    // 414px以下 の場合に実行
    console.log('iPhone Plus系より小さい端末');
  } else if( myWidth > mobileWidth && myWidth <= tabletWidth ) {
    // 414pxより大きい かつ　768px以下 の場合に実行
    console.log('iPhone Plus系より大きくiPad系タブレットまでを含む端末');
  } else if( myWidth > tabletWidth && myWidth <= pcWidth ) {
    // 768pxより大きい かつ　1024px以下 の場合に実行
    console.log('iPadより大きくiPad Proまでを含む端末');
  } else if( myWidth > pcWidth && myWidth <= wideScreenWidth ) {
    // 1024pxより大きい かつ　1366px未満 の場合に実行
    console.log('1024px〜1366pxまでのウインドウサイズ');
  } else if( myWidth >= wideScreenWidth ) {
    // 1366pxより大きい場合に実行
    console.log('1366pxを超えるウインドウサイズ');
  } else {
    return;
  }
});

↑先ほどのコードをこの様に書きかえると、ユーザーがウインドウを拡大縮小したタイミングで、
合致する任意のViewport幅の条件を元に、それぞれの処理を動かすことができます。
こちらの場合で重要なのは、リサイズイベントを監視している
window.addEventListener(‘resize’, … の内側で、
window.innerWidth; を実行するという事です。
これによって、ウインドウ幅が変わったタイミングでのViewport幅の値を取得することができます。

どんな場合に使えるか

単純な用途としては、
レスポンシブなWebサイトで、端末ごとに何か処理を変えたい場合。
特に、ユーザーエージェントに依存せずにそれを行いたい場合。
※もちろん今回の例に加えて、更にユーザーエージェントの判定も組み合わせると、
（それが良いかどうかは別の話として）より詳細な制御をすること自体は可能です。

さらに、応用すれば、以前ご紹介した IntersectionObserver の記事でご紹介している例の様に、
任意の端末ごとに違ったアニメーションを実行する（違ったcssアニメーションのclassを付与する）、
といった使い方などもできそうですね。

この記事のまとめ

Webデザイン、Web制作の現場にいると、
ある日突然
「この端末のときはこれを実行してほしいんです」
「タブレットの場合だけこういう動きで、スマホの場合だけこういう動き！」

↑こういったご要望を、案件の意思決定・決裁権をもった方からいただくことがあります。

そしてそれが
結構案件が進んだ時であったり、
場合によってはリリース直前のタイミングであったり、という事が時々あります。

そういったケースで困らないためにも、
「もしこういう要望が出た場合、こうすれば良い」というような、
様々なケースを想定して（仮にその案件では結果、使わなかったとしても）
対応できる仕組みを用意しておくと、なにかと安心ですよね。
少なくとも私の経験上では。安心な場合が多いです。
もちろん、あまりにも直前すぎるご要望の場合は、リリース後の対応に回してもらうようにお願いさせてもらう場合もあります。
いずれにせよ、制作者として、引き出しが多くある事は良い事だと思うわけです。

当サイトでは、今後もWebデザイン、Web制作に関する記事を執筆していく予定です。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。