menu
menu

キーワード検索

 

前月(4月)の人気記事トップ10 - 5/1/2019

  1. ( 2 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
  2. ( 6 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  3. ( 1 ↓) 【CSS】CSSだけでドロップダウンメニュー
  4. (圏外↑) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 3 ↓) 【jQuery】jQueryでドロップダウンメニュー
  6. (圏外↑) 【決定版】フォントの設定はこれで決まり❗️
  7. (圏外↑) 【Mac】iMovieの保存場所を変更する
  8. (圏外↑) 【Mac】Finderにフォルダのフルパスを表示させる方法
  9. ( 5 ↓) 【WiMAX】HUAWEI W04 気づくとWi-Fiの接続が切れてる
  10. ( 9 ↓) 【制作Tips】iPad画面解像度まとめ
このエントリーをはてなブックマークに追加

【JavaScript】JavaScriptで振り分ける方法2パターン

【jQuery】JavaScriptで振り分ける方法2パターン

こんにちは(・∀・)

今日はJavaScriptで振り分ける方法2パターンをご紹介します。

JavaScriptとレスポンシブデザインの組み合わせ

レスポンシブデザインのサイトでスマホ向けとPC向けでJavaScriptを使い分けたい場合は多くあると思います。

スマホ向けのページにはJavaScriptを使いたいけどPC向けのページではJavaScriptは必要ない、逆の場合もあれば、またはそれぞれ別のスクリプトを使用したいこともあります。

Contents

  1. Windowサイズで振り分ける
  2. 要素の有無で判別
Windowサイズで振り分ける

Windowサイズで振り分ける方法です。

サンプル
JavaScript

<script>
$(function(){
if($(window).width() < 769){
//forスマホ
}else{
//forPC
}
});
</script>

画面サイズで振り分けることができます。

 

要素の有無で判別

画面に表示されている要素の有無で振り分ける方法です。

サイトに表示させるグローバルナビやボタンなどはスマホサイトとPCサイトで変えていることは多いと思います。

例えばスマホサイトではハンバーガーボタンを使いますが、PCサイトでは別の方法でボタンを表示するなど。

それら要素の表示非表示を利用します。

サンプル

.is(':visible')または.is(':hidden')で要素の表示非表示を判別します。

CSS

<style>
#hoge {
  display: none;
}
@media (min-width: 769px) {
#hoge {
  display: block;
}
/* ** */}
</style>
JavaScript

<script>
$(function() {
$(window).on('load resize', function(){
if($('#hoge').is(': hidden')){
//forスマホ
} else {
//forPC
}
});
});
</script>

 

目印となる要素がdisplay:noneなのかdisplay:blockなのかで判別して振り分けます。


参考

javascript(jQuery)でメディアクエリを判定する方法(IE9対応)

  • JavaScript jQuery レスポンシブデザイン
このエントリーをはてなブックマークに追加