レスポンシブルウェブデザインのブラウザ幅を聞く？

Question

私は自分のサイトをモバイルフレンドリーにしようとしています。

ブラウザウィンドウのサイズを知りたいので、728pxよりも狭いときは何かしてください。

これは、PCのウィンドウのサイズ変更と、電話機のポートレートモードからランドスケープモードへの変更を考慮する必要があります。

どうすればいいですか？

Answer 1

m90が示唆するように、あなたがやりたいことがスタイルを修正するだけならば、media queriesを見てください。ただし、スタイルを変更する以外にも、JavaScriptを使用する必要があります。

平野のJavaScript

問題は、それがブラウザの間で変化し、それはウィンドウの幅を取得するために、完全にまっすぐではないということです。だから、（未テスト）このような何かをする関数を作成する必要があります：

var width = 0; 
function updateWindowSize() { 
    if (document.body && document.body.offsetWidth) { 
     width = document.body.offsetWidth; 
    } 
    if (document.compatMode=='CSS1Compat' && 
     document.documentElement && 
     document.documentElement.offsetWidth) { 
     width = document.documentElement.offsetWidth; 
    } 
    if (window.innerWidth) { 
     width = window.innerWidth; 
    } 
} 

次にあなたはさらにonResizeイベントウィンドウのために耳を傾け、毎回ウィンドウの変更を新しいウィンドウサイズを取得するための関数を呼び出すことができます。

window.onresize = function(event) { 
    updateWindowSize(); 
} 

あなたはjQueryのを使用した場合、これはjQueryの舞台裏あなたのためのクロスブラウザサポートの世話をするよう、少し短く行うことができます

のjQuery：

var width; 
$(window).resize(function() { 
    width = $(window).width(); 
}); 

Answer 2

警告として、IE8以下はメディアクエリやCSS3をサポートしていません。あなたがIE8を気にしないなら、それに行きなさい。 Respond.js、ModernizrなどがIE6-8をサポートするのに役立ちますが、完璧とはほど遠いものです。