web-dev-qa-db-ja.com

レスポンシブWebデザインにjQueryを使用しても大丈夫ですか？

私は、サイトを更新してレスポンシブにし、スマートフォンで正しく表示するように任されました。残念ながら、現在の形式のサイトは操作が非常に簡単ではありません。CSSを変更することはできません。

ブラウザのサイズを検出し、jQueryでCSSを変更することは悪いと考えられますか？

例えば。：

if ($(window).width() < 960) {
    //make heaps of CSS changes 
}
cssmobilejqueryoptimizationresponsive-webdesign
11
MeltingDog

承知しました。明らかに、CSSを単独で使用する方が良いでしょうが、できない場合は、使用しているものを使用してください。 CSSでできる限りのことを行い、必要に応じてJSを使用します。既存のCSSを変更できない理由はわかりませんが、JSでスタイルシートを追加できます。

(function() {
  //create a new element
  var newStyle = document.createElement("link");

  //set the required attribute for a valid css file
  newStyle.rel = "stylesheet";
  newStyle.href = "http://example.com/the/location/of/your/css/stylesheet.css";

  //and then append it to the <head>
  document.getElementsByTagName("head")[0].appendChild(newStyle);
})();

ソース： http://christian-fei.com/add-stylesheets-after-the-head-using-javascript/

次に、CSS /メディアクエリを使用します。

またはjQueryを使用：

$('head').append('<link rel="stylesheet" type="text/css" href="{url}">');

私は、DOMを変更しないとできないことがあるレスポンシブな「スキン」を実行しました。 HTMLにアクセスできない場合、JS DOM操作が唯一の答えである場合があります。

編集：
スモールスクリーンバージョンの視覚的要件によっては、このCSSスニペットが「モバイルフレンドリー」への道のりをどれだけ進めるかに驚くかもしれません。

/* hopefully the original CSS developer didn't include a bunch of !importants.*/
div, p, ul, table, img {
    float: none !important;
    max-width: 96% !important; /* breathing room on the sides */
    margin-left: auto
    margin-right: auto; 
}

元のCSS開発者が!importantを過度に好み、HTMLにアクセスできない場合、jQuery/JSを使用してIDを本文または高レベルコンテナーに追加し、セレクターに追加できます。

   #i-will-beat-you-important div,
   #i-will-beat-you-important p,
   #i-will-beat-you-important ul { 
        float: none !important; 
        ...
   }
13
Will

最初にメディアクエリを使用してみてください。元々デスクトップ専用のデザインを扱うときに簡単に見つけられた方法の1つは次のとおりです。

2つの別個のスタイルシートから始めます。 1つは新しいレスポンシブデザイン用で、もう1つは古いデスクトップバージョン用です。

<link rel="stylesheet" media="screen and (max-width: 959px)" href="css/mobile.css">
<link rel="stylesheet" media="screen and (min-width: 960px)" href="css/desktop.css">

古いスタイルはすべてdesktop.cssに含めることができます。一方、mobile.cssでゼロから開始できます。タブレットで動作するモバイルCSSでニースの単一列レイアウトを作成できる場合があります。

このアプローチにより、新たなスタートを切ることができ、モバイルやタブレットだけにスタイルを設定でき、デスクトップスタイルを使用したり上書きしたりする必要はありません。モバイルの場合にのみ必要に応じて要素を非表示/表示/配置できます。

モバイルとデスクトップで動作するようにデスクトップコードを変更する必要がある場合は、マークアップをリファクタリングできます。あるいは、レスポンシブバージョンとモバイルバージョンの両方に対してHTMLを現実的にリファクタリングできない場合は、デスクトップコードにクラスを置くことができます。クラス「デスクトップ」とモバイルバージョンでCSSを使用して非表示にします。次に、そのセクション用の新しいHTMLを作成し、class="mobile"を付けます。次に、mobile.cssでスタイルを設定し、desktop.cssで非表示にします。

4
lightspeeder

私はその方法を使用するサイトで作業しましたが、モバイルデバイスで画面の回転に問題がありました。 JavaScriptはページの読み込み時に1回しか検出しないため、ユーザーがデバイスを回転させても、メディアクエリのように全幅に拡大することはありません。当時はCSSに切り替えるだけで簡単でしたが、おそらくビューポート幅の変化を検出する方法があるかどうかをJSの専門家が知っているでしょう。 AJAXを使用する方法があるように思えますが、megasteveが説明するように、パフォーマンスに関する限り、あなたが見つけたものはすべてやりすぎになると思います。

3
stephanie

応答性と「スマートフォンで正しく表示される」はまったく別のタスクです。

  1. おそらく、応答性とは、可能な限りサーバーへの余分なラウンドトリップを排除することを指します。エラーチェック、要求されたデータを取得するAjax、および動的DOM操作は、通常、応答性を向上させるタスクです。これを行うには、JavaScript（またはJavaScriptフレームワーク）を使用すると効果的です。過去数年間、これらの実装のためにJavaScriptからjQueryに移行しました。多くの場合、jQueryには組み込みのブラウザー互換性があり、明らかな利点があります。 datepicker、オートコンプリート、およびメニューのプラグインにより、開発時間を節約できます。

スタイリングの主なソースであってはなりません。それがCSSの仕事です。ただし、この2つを効果的に併用できます。簡単な例では、何らかのアクションの結果に応じて、テキストのスタイルが異なる場合があります。 jQueryを使用して、CSS定義クラスを変更できます。

$('#result').removeClass('red').addClass('green');
  1. スタイリングを動的に変更して、モバイル用の標準​​ページを再利用しようとするのは魅力的です。私の経験では、それは不十分なソリューションを提供します。 CSSは完全に異なっており、モバイル機能を利用するには異なるクライアント側スクリプトが必要です。私の好みは、使用するスタイリングまたは機能を選択するロジックを必要とする1つのページではなく、個別の専用HTMLページを作成することです。
2
stephanie perry

以前は、サイトで人気のある 960.gs css framework を使用していました。

レスポンシブにしたかったのです。

誰かが 960 gsのJSベースのレスポンシブプラグイン を作成したので、構造サイトテンプレートに変更を加える必要がないので、なぜそれを使用しないのかと考えました。

動作はしましたが、優れたブラウザを含むほとんどのブラウザで遅れていました。通常、ページの複雑さによって大きく異なる「スタイルのないコンテンツのフラッシュ」が発生します。

JSソリューションは機能していますが、理想的ではありませんが、可能であればCSS 3メディアクエリが最良の選択です。最後に、 Twitter Bootstrap を使用してサイトテンプレートを再編集しました。これは、ニーズに非常に適していました。

近道をすることは遠慮がちですが、多くの場合、長い目で見ればより時間のかかる/痛みを伴います。

1
megasteve4