ロードと私は私のウェブサイトが応答作るためのCSSメディアクエリを使用してい念頭にCSSメディアクエリで

JavaScriptをアンロード：ロードと私は私のウェブサイトが応答作るためのCSSメディアクエリを使用してい念頭にCSSメディアクエリで

@media (min-width:1200px) { 
    // DESKTOP STYLING 
} 

@media (max-width:1200px) { 
    // MOBILE STYLING 
}

私は当初、メディアクエリ

if(min-width:1200px) { 
    // DESKTOP JAVASCRIPT 
} else { 
    // MOBILE JAVASCRIPT 
}

をチェックするためにhttps://github.com/paulirish/matchMedia.jsを使用私の画面が< 1200pxの場合、すべてがうまくいきます。デスクトップ版が表示されている場合は、モバイル版が表示されます（javascriptも同様に動作します）。私は、例えば、ウィンドウのサイズを変更起動時に

問題は今ある：

1) LOADS DESKTOP JAVASCRIPT (EVERYTHING IS FINE) 
2) RESIZE WINDOW < 1200px (SWITCH TO MOBILE TEMPLATE) 
    LOADS MOBILE JAVASCRIPT (SITE BREAKS) 
3) RESIZE WINDOW > 1200px (SWITCH TO DESKTOP TEMPLATE) 
    LOADS DESKTOP JAVASCRIPT A SECOND TIME (SITE BREAKS EVEN MORE)

だから私は、任意のアイデアを思っていた二つの異なるJavaScriptファイルを持っているかもしれないjavascriptやエレガントな方法は、どのメディアに依存ロードする方法「アンロード」へクエリが使用されていますか？

出典

2012-03-30 jay7

jQuery Mobileを使用してみてください。 http://jquerymobile.com/ ...また、技術的には、JavaScriptを使用してウェブサイトを応答性にする必要はありません。これは、CSSと流体レイアウトですべて達成できます。 JavaScriptがどのように機能するかについてもう少し詳しく説明してください。 –

まあ、JavaScriptを使用してサイトを応答させることはありません。私はちょうどCSS（Media Queries、私は2つの別々のテンプレートを設計しています）でそれを行います。しかし、モバイル版とデスクトップ版は同じDOM要素を使用しているため、JavaScriptはスライドショーを実行しようとしています。モバイル版で最もインタラクティブな要素が単純化される原因の1つが問題です。スライドショーの代わりに静的な画像があります。 – jay7

さて、わかりました。申し訳ありませんが、あなたの状況全体を誤解しました。 –

最初に使用すると、1つのJavaScriptを（一緒に2を結合する）があり、あなたのウィンドウサイズが1200

それとも2つのオブジェクトにJavaSciptファイルをラップしようとすることができより大きいかそうでないかどうかを確認しますコントローラを持つことができます、コントローラーとして扱う3番目を作成します。 Via Ajaxを使用すると、ファイルをロードしたりアンロードしたりできます（コントローラはまだ存在するため何もブレークしません）。これは問題ですが、スイッチを作成するときにすべてのリスナーを削除する必要があり、少し時間がかかる別のファイルをロードする必要があるためです。

これが役に立ちます。ところでいい質問。

出典

2012-03-30 20:04:01 helly0d

応答ありがとうございました、helly0d。もう少し簡単にやりたいと思っていました。しかし、私はそれが唯一の方法だと思う。 javascriptファイルが非常に小さくても、すべてのハンドラをアンバインドする必要がある場合は問題ありません。単純なスイッチのためのひどい余分なコードのようです:) – jay7

ところで、別のサイズのスクリプトが2つ必要ですか？できるだけ一般的なスクリプトの機能を作ってそれらのパラメータを設定することはできませんか？あるいは、これらの2つのスクリプトを通して異なるHTMLコントロールをロードしますか？ – helly0d

Enquire.jsのようなライブラリをお勧めしますが、いつでも自分でトリガーを作成できますが、「デスクトップスライドショー」と「モバイルスライドショー」がある場合は、非アクティブなものを必ず破棄する必要がありますresizeとInquireには、一致しないトリガーを含む素晴らしいAPIがあります。

「デスクトップスライドショー」と「モバイルスライドショー」の同じスライドショープラグインを扱っていますが、異なる設定が必要です（たとえば、ボトムアライメントされたページャーと次の/前のナビゲーションを使います）。ページの読み込み時に設定されますが、デバイスが方向変更などでメディアクエリのブレークポイントを変更した場合はどうなりますか？

出典

2013-05-02 17:44:53

ロードと私は私のウェブサイトが応答作るためのCSSメディアクエリを使用してい念頭にCSSメディアクエリで

答えて

関連する問題