ページ幅に基づいてCSSライブを変更する

Question

現在のページ幅に基づいてページに特定のスタイルを追加しようとしています。私はこれをライブで機能させたい。たとえば、iPhoneで表示しているときに既に読み込まれたページを表示しているときに画面を回転させると、CSSが変更されます。また、モバイルjqueryライブラリを使用するのが理想的です。助けを前にありがとう。ここでは、すべてを選択し、バックスペースを打つ/キーボードのキーを削除し、私がこれまで動作するようには思えない、私もLiveQueryを使用してみましたが、それは今

$(function() { 
    $(document).live('css_init', function() { 
      if (($(window).width()) > 430) { 
       $('#main_panels .next').addClass("next-wide"); 
       $('#main_panels .prev').addClass("prev-wide"); 

      }; 
     }); 
     $(document).trigger('css_init'); 
}); 

Answer 1

停止のいずれかを動作しませんでしたものです。

これで恐怖が薄れてきたので、Media Queriesにご紹介しましょう。これは、最新の携帯端末（WAPポータルではなく、フルウェブブラウザ搭載のもの）で完全にサポートされています。最新のデスクトップブラウザでも広くサポートされています。唯一の例外はIE < 9です。そのためにはRespond.jsです。

今、ウェブ標準の栄光に満ちています。

Answer 2

jquery resizeイベントリスナーを使用できますか？

myFunction() { 
    var w = $(window).width(); 
    if (w > 430){ 
     // do stuff 
    }; 
} 
$(window).resize(function(){ 
    myFunction(); 
} 

Answer 3

CSSメディアクエリは、javascriptなしで実行する必要があります。あなたはいくつかのハードの解像度のcontraintsを追加したいが行うのはthatsのは簡単かもしれ

<link rel='stylesheet' media='screen and (orientation:landscape)' href='css/landscape.css' />

：

はこのような何かを試してみてください。

http://css-tricks.com/css-media-queries/