menu
menu

キーワード検索

 

11月更新・前月(10月)の人気記事トップ10 - 11/10/2019

  1. ( 2 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
  2. ( 6 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  3. ( 1 ↓) 【CSS】CSSだけでドロップダウンメニュー
  4. (圏外↑) 【Mac】外付けメディアが取り外せなくなったらSpotlightの除外項目を設定してみる
  5. ( 5 - ) 【Mac】Finderにフォルダのフルパスを表示させる方法
  6. ( 7 ↑) 【Mac】Safariでソースコードを見る方法
  7. ( 10 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  8. (圏外↑) 【Mac】iMovieの保存場所を変更する
  9. ( 4 ↓) 【制作Tips】iPhone画面解像度まとめ
  10. ( 8 ↓) 【制作Tips】画面解像度一覧表
このエントリーをはてなブックマークに追加

【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 レスポンシブデザイン
このエントリーをはてなブックマークに追加