技術

javascriptで画面サイズ毎に処理をしたい時

投稿日:

こんにちは

今回はjavascriptで画面サイズ毎に処理をしたい時にオススメの方法を紹介します。

メディアクエリを設定するときって

@media screen and (max-width: 767px) { 
  /* スマホ */
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  /* タブレット */
}
@media screen and (min-width:1025px) {
  /* PC */
}

みたいな感じになるかと思います。

そしてjavascriptでスマホの画面サイズ時だけ処理をしたいというときに

$width = window.width()
if ($width < 768) {
  // やりたい処理
}

まずブラウザの横幅を取得してメディアクエリで設定した値と比較します。
ただ、このやり方だと修正が入った時けっこうめんどくさいので
代わりにfont-familyを使います。

こんな感じで設定します。

@media screen and (max-width: 767px) { 
  /* スマホ */
  .l-sizedetect {
    font-family: 'sp';
  }
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  /* タブレット */
  .l-sizedetect {
    font-family: 'tablet';
  }
}
@media screen and (min-width:1025px) {
  /* PC */
  .l-sizedetect {
    font-family: 'pc';
  }
}

後はjavascript側でl-sizedetectのcssを取得してやればOKです。

if ($('l-sizedetect').css('font-family') === 'sp') {
  // スマホでやりたい処理
} else if($('l-sizedetect').css('font-family') === 'tablet') {
  // タブレットでやりたい処理
}

-技術

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.

関連記事

Angularでセレクトボックスに色をつけたいとき

こんにちは。コーテッグのこやまです。 Angularでセレクトボックスが特定の値 …

no image

【Angular】Delete methodにbodyデータを付与する

こんにちは 今回はAngularのDeleteメソッドでbodyデータを付与する …

no image

CSSで片方を固定、片方を可変のレイアウトを実装

こんばんは IE8・9ではdisplay: flex;が使えないがために片方を固 …

no image

【ionic】FBログイン時にSafari認証になってしまう

どうも中田です。 ionicでFacebookログインを実装した時に、 Nati …

no image

[Angular]APIから画像を取得して表示する

こんばんは アプリケーションを作っていてフロント側で画像を出すときって ストレー …