質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

28548閲覧

レスポンシブにおけるjs(jQuery)の切り替えについて

N_Kura

総合スコア32

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

5クリップ

投稿2015/09/02 12:55

編集2015/09/02 13:06

jQueryを主に使ってWebサイトの動きをごにょごにょしているのですが、
レスポンシブデザインでスマホ、タブレット、pcで用いるjQueryを切りたいと考えています!
今回の場合は、pcではlightbox(featherlight.js)で表示していた要素を、スマホではタブ切り替え(生jQueryもしくは何かプラグイン)で表示できるようにしようと思っています。

この際の、jsを切り替えるベストな方法を教えてくださると助かります。

ちなみに自分なりに調べたものとしては

  • $(window).on('load resize')でwindowのwidthによって切り替える。
  • window.matchMediaをつかってwidthによって切り替える。
  • window.userAgent.indexOf('iPhone')をつかってユーザーエージェントによって切り替える

などがありました。

$(window).on('load resize')で過去に切り替えたことがあるのですが、
ぎこちなかったり、すこし挙動が出たりして
(#追記:確実にこれのせいとは言えませんが、画面サイズ変更時に2重に読み込まれるのかも。)

どの方法がいいのか迷っております。

もちろん状況に応じて変わるとも思いますし、
$(window).on('load resize')は画面サイズ変更ごとにjsが動いてしまう。iphoneを横に使用した場合の対応。
matchMediaはIE9以下未対応、
useAgentは対応する個体数が多くなるにつれて大変などあるかと思いますが、
これがおすすめ。これ使うならこうしたほうがいいよ。他にもっといい方法があるよ。や、気をつけるべき点などがあれば教えていただけると助かります。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

横幅だけで切り替えるならユーザエージェントで切り替えるのが簡単かと思います。
スマホやタブレットのポートレートとランドスケープ、PCのブラウザ幅調整も考慮にいれるならresizeが良いと思います。

javascript

1$(function() { 2 var current = 'small'; 3 $(window).resize(function() { 4 var w = $(window).width(); 5 var x = 640; 6 if (w <= x && current !== 'small') { 7 // 640px以下のときの処理 8 current = 'small'; 9 } else if (w > x && current !== 'big') { 10 // 641px以上のときの処理 11 current = 'big'; 12 } 13 }); 14});

とか、ちょっと工夫してリサイズして毎回処理が走らないようにするとかでしょうか?

投稿2015/09/02 16:34

編集2015/09/02 16:34
icham

総合スコア559

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

N_Kura

2015/09/03 13:09 編集

ichamさん、回答ありがとうございます! なるほど、たしかにresizeのほうが調整できることが多くて便利ですね。(その分色々考慮しなければいけませんが...笑) 参考になるコードありがとうございます。たしかにこれなら処理が軽くなりますね! 前の質問で教えていただいたのですが、setTimeoutを使用しても処理を軽くできるようなので併用してもいいのかな。(教えて頂いた参考サイトです:http://kadoppe.com/archives/2012/02/jquery-window-resize-event.html) ただ、この場合はloadイベントの処理は別で記述したほうが良さそうですね。 また、resizeでの切り替えで、特に気をつけるべき点などありますでしょうか。
guest

0

ベストアンサー

環境の振り分けをする際に自分がよく使う方法は
・documentのDOMContentLodedイベントを使って
・resizeイベントのリスナー登録と実行を同時に行う
というものです。

JavaScript

1document.addEventListener( 2 'DOMContentLoaded', //① 3 function(ev){ 4 window.addEventListener( 5 'resize', //② 6 (function on_resize(ev){ //③ 7 if(window.matchMedia('(max-width: 640px)').matches){ //④ 8 //スマホ向けの処理 9 } 10 else{ 11 //PC、タブレット向けの処理 12 } 13 return on_resize; //⑤ 14 })(), //③ 15 false 16 ); 17 }, 18 false 19); 20

①DOMContentLoadedイベントはloadイベントより前、HTMLが解析された時点で呼び出されます。そのため、画像の読み込みを待つ間などに中途半端な状態が表示されることがありません。画像のサイズを取得するなど、loadイベントの後に実行する必要がある場合を除いては、たいていこのイベントを利用しています。

②画面の幅を基準にすることを想定して、resizeイベントにリスナーを登録します。

③CSSとの連携を考慮してwindow.matchMediaで環境を振り分けます。

④resizeイベントのリスナー指定部分 (function on_resize(){...})() は、「on_resize」という名前で定義した関数の、実行結果を受け取っています。on_resize関数の中身はresizeイベント時の処理ですが、最初のresizeイベントが起こる前に一度実行することで、初期の状態をセットします。

⑤自分自身を返します。「return arguments.callee」と同じです。ここで自分自身を返すことで、③でresizeイベントのリスナーにこの関数が登録されます。

と、ここまで書いて気づいたのですが、こちら2015年9月の投稿でしたね…
すでに解決されているかと思いますが、ご参考まで。

見当違いでしたら、すみません m(_ _)m

投稿2017/07/26 00:07

miwakazuo

総合スコア52

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問