技術

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

gormでバルクインサート

こんにちは gormでレコードを作成する時は user := User{Name …

no image

AWS CLIでInvalidSignatureException Error

ECRにイメージをpushするために、dockerログインしようとして遭遇しまし …

[Xcode]Provisioning Profileの中身を確認する方法

こんにちは。たなかです。 以前『[Xcode]Provisioning Prof …

[Rails]遷移元のURLを表示する方法

こんにちは。たなかです。 「このページから遷移してきた時は、こう処理したい」みた …

no image

【Rails】Railsでsitemap.xmlを作成する

こんにちは Railsでsaitemap.xmlを作成する方法を紹介します。 s …