• ベストアンサー

レスポンシブWEBデザイン jsの指定について

レスポンシブWEBデザインで、PC用に指定しているjQueryプラグインを、スマホでは指定しない方法を知りたいと思っています。 例えば、640px以下はjQueryプラグインを動かさない、といった感じです。 ご教授の程、よろしくお願いします。

  • CSS
  • 回答数2
  • ありがとう数16

質問者が選んだベストアンサー

  • ベストアンサー
noname#199456
noname#199456
回答No.2

Javascript onMediaQueryというのを使ってみてはどうでしょうか

参考URL:
http://www.moongift.jp/2012/06/20120608-3/
mituru326a
質問者

お礼

お返事が遅くなって申し訳ありません。 プラグインのご紹介、ありがとうございます。 使ってみようと思います。 ありがとうございました。

その他の回答 (1)

  • ok-rjak
  • ベストアンサー率52% (70/134)
回答No.1

Javascriptで画面サイズではなくOS種別等で振り分けるなら var ua=navigator.userAgent; if (ua.indexOf('ipad') != -1 || ua.indexOf('ipod') != -1 || ua.indexOf('iphone') != -1 || ua.indexOf('android') != -1){ // スマホの場合 }else{ // それ以外の場合 } でどうでしょうか?

mituru326a
質問者

お礼

お返事が遅くなって申し訳ありません。 アドバイス、ありがとうございます。 さっそく試してみたいと思います。 ありがとうございました。

関連するQ&A

  • レスポンシブWebデザインでテキストの振分について

    現在あるPCサイトをスマホにも対応させたいので、スマホ用のファイルを別に作成するか、またはレスポンシブWebデザインにしようと考えております。 そこで疑問に思ったことがあります。 私が把握しているレスポンシブWebデザインのサイトは、例えば住友商事のようなサイトです。http://www.sumitomocorp.co.jp/ パソコンのブラウザで表示している場合、マウスを使ってカーソルを操作してブラウザを縮小すると、レイアウトが可変します。 ※もちろん、スマホで見れば、スマホに最適化された表示になっております。 一方、アマゾンのようなサイトの場合、パソコンでカーソルを操作してブラウザを縮小しても表示は変わりません。 しかし、PCとスマホで異なるデバイスで確認すると、表示しているテキストや画像が異なります。 私の認識では、このようなサイトはPC用とスマホ用で異なるファイルを作成し、PCとスマホで読み込ませるURLを振り分けるていると思っておりましたが、PCで確認してもスマホで確認してもアドレスバーに表記されているURLは同一の物です。 このアマゾンのようなサイトはレスポンシブWebデザインによって作られているのでしょうか? もし、レスポンシブWebデザインならば、デバイスごとに表示させる画像を振り分けることははもちろんのこと、テキスト(文章)の振り分もできるということなのでしょうか? レスポンシブWebデザインで画像もテキストも振り分けられるなら、PC用とスマホ用でファイルを分ける必要はないかと思うので、私が作成したPC用のサイトを、レスポンシブWebデザインにしようかと思っております。 以上となります。 どのようなご回答でも良いので、また質問の内容とはそれてしまってもよいので、なにかしらご回答を頂けると幸いです。 宜しくお願い致します。

    • 締切済み
    • CSS
  • レスポンシブに出来るデザインと出来ないデザイン

    レスポンシブに出来るデザインと出来ないデザインがあると聞いたのですが、 具体的にどんなデザインだと出来ないという情報が無いのですがどんなデザインは出来ないのでしょうか? スマホがワンカラムなのでワンカラムに出来ないサイトは出来ないということでしょうか? 380px以上でワンカラムに出来ればどんなデザインも大丈夫なのでしょうか? またスマホやタブレット用のサイズのときはGVを下に持っていくなどそれようのUIに変形するように実務ではすべきなのでしょうか? それともPCと同じ順番でもよいのでしょうか? また賛否両論でこれからWEBクリエイターを目指す者がこちらを習得すべきなのでしょうか? それともそれぞれの端末ごとの作成を習得した方がよほどよいのでしょうか?

    • ベストアンサー
    • CSS
  • レスポンシブWebデザインに詳しい方

    PC、スマホサイトを運営しています。A業者さんに、レスポンシブwebデザインで制作していただきました。今回、リニューアルをする予定なんですが、B業者に、PC版のみ制作してもらった場合、自動でスマホ版も更新されるのでしょうか?もしされない場合、B業者が作ったHPを、別の業者にレスポンシブwebデザインにて変更していただくことは可能なんでしょうか?諸事情で、A業者さんには頼めません。B業者は、レスポンシンブでは作れないとのことです。

    • 締切済み
    • CSS
  • レスポンシブWEBデザインについて

    レスポンシブWEBデザインのフルスクリーンスライダーに関して こちらのサイト内デモのフルスクリーンスライダーなのですが http://www.alessioatzeni.com/blog/brushed-template/ スマホ表示にするとフルスクリーン画像が切り取られ中央の一部しか表示されなくなってしまいます。 スマホ用きちんと画像のすべてを表示するにはどこをいじればいいのでしょうか? UIが気に入っているのでぜひこちらのテンプレートを使用したいのですが これだけが難点です。 御教授ください。

  • レスポンシブWebとjQuery Mobile

    WebDesigning誌のバックナンバーを追って 独学しています。 別の号の特集でそれぞれ レスポンシブWebデザインとjQuery Mobileが 出てきたのですが、 レスポンシブWebデザインは端末によって 違うCSSを適用させてレイアウトを 変えるので、スマートフォン向けにすることも できるということだと思うのですが、 jQuery Mobileもスマートフォン向けのようで、 2つのやり方を、どう使い分けたらよいのか わかりませんでした。 それぞれが、どのような用途に適しているのか 教えてください。

  • レスポンシブwebデザイン PC背景とスマホ背景変

    レスポンシブwebデザイン PCの背景とスマホの背景を別々に変更したいのですが、 どうやっても上手くいかない状況です。 どなたか解決できる方法をお教えくださませんでしょうか。

    • 締切済み
    • CSS
  • レスポンシブWebデザインでファビコンの切り替え

    レスポンシブWebデザインをしているのですが、 パソコンの場合、スマホの場合などでファビコンの画像を 変えることは可能なのでしょうか。

    • 締切済み
    • CSS
  • レスポンシブのデザインについて

    ポスポンシブのデザインを設計する際はどのように書いていますか? iPhone5系などの320×568を基準に作っていますか? それともシェアが多い375×667を基準ですか? デザイナーからspのフレームワークをもらったのですが、基準が750pxになっており、750pxではパーフェクストピクセルで表示できるのですが、320×568ではやはりレイアウトが崩れてしまいます。 なぜかというとそもそもボックスがwidth:600pxとなっていてiPhone系ではレイアウトが崩れます。 今回はpcとタブレット兼スマホでブレイクポイントを作っていますので、この場合では750pxではなく画面サイズが小さいスマホ(320px)を基準に作るべきではないのですか? 320px基準であれば750pxに画面幅が広がっても拡大されるだけなのでレイアウトは崩れないと思うのですが、、、 レスポンシブを初めて作るので勝手がわからず、意味不明な質問かもしれませんが、回答よろしくお願いします。

    • 締切済み
    • CSS
  • レスポンシブWEBデザイン 画像拡大

    お世話になります。 レスポンシブWEBデザインに対応していて、無料で使える商用利用可能な 拡大画像表示のlightboxみたいなプラグインを探しています。 ご存知の方、いらしたら教えてください。 よろしくお願いします。

  • レスポンシブwebデザイン

    レスポンシブwebデザインで スマホの時は <img src="http://1.png"> <img src="http://2.png"> の様に2つの画像を表示し PCの時は <img src="http://1.png"> <img src="http://2.png"> <img src="http://3.png"> の様に3つの画像を表示する事は出来ますか? 実際のタグはどちらも <img src="http://1.png"> <img src="http://2.png"> <img src="http://3.png"> のように同じで スマホの場合は <img src="http://3.png">だけ 高さや横幅を0にして小さくするしかないのでしょうか?

    • ベストアンサー
    • HTML

専門家に質問してみよう