技術

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

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

【Rails】RailsでFriendlyURLを設定する

こんばんは 例えばRailsでブログ記事ページのルーティングを設定するときは b …

git_logo

[Git] どのコミットでバグが入ったか原因究明する方法【git blame】

こんにちは。さとうです。 今回はgitを使って、どのコミットでバグが入ったか原因 …

[Angular] @NgModuleをざっくりと

どうも中田です。 最近社内でAngularの波が起こってるので そのビッグウェー …

no image

[Rails] deviseのパスワード認証を半角英数字だけ許可する

こんばんは ログイン機能を作る時ってdeviseが便利ですよね。 ですが、デフォ …

LINE BOTを無料で試してみました。heroku + Rails

こんばんは たまにはエンジニアっぽいところを見せようと思い、遅ればせながら、流行 …