1
私はかなり簡単なはずだと思うことをしようとしていますが、解決策の簡単な説明は見つかりませんでした。レスポンシブなデザインでjavascriptを条件付きでロードする
私は最初にモバイルであるレスポンシブウェブサイトを構築しています（デフォルトで320ピクセル幅）。その小さな解像度では、このサイトは1つのコラムであり、私は個々の「ボックス」が内部に含まれるコンテンツの自然な高さに拡大または縮小することを許可しています。
しかし、サイトが3つの列に展開されるより大きい解像度では、各列のボックスの高さを等しくするために小さなJavaScript関数を追加します。私は私が話して何をするさまざまな方法を見つけた
jQuery(document).ready(function() {
setHeight('#inner-footer .widget-area');
});
var maxHeight = 0;
function setHeight(column) {
//Get all the element with class = col
column = $(column);
//Loop all the column
column.each(function() {
//Store the highest value
if($(this).height() > maxHeight) {
maxHeight = $(this).height();;
}
});
//Set the height
column.height(maxHeight);
}
：私が話しています関数は、このようなものになるだろう。
- 私はmodernizr "load"関数（正式にはyesnope.js）を使用できます。このリンクで説明したようにニコラスZakas「isMedia」機能を搭載したカスタム機能を使用して
- Media Specific Javascriptまたは
- Media queries in the real world
var screenWidth = (screen.width < 768) ? true : false;
のようにjavascript関数「screenWidth」変数を使用して、カスタム
JavaScriptの知識が限られているため、実際にスクリプトを実行するためのコードを書くことができませんでした。誰でもここで私を助けることができますか？
私は私の感覚はmodernizrアプローチは、ユースケースの最大数にこの作業を行うための最も堅牢で安定した方法であることで、私はちょうどそれがクロスブラウザを動作させたいのアプローチは特に好み、などを持っていませんが、私はそれを完全には分かっていない。私はmodernizrを変更したことがないので、どのように書くか、そしてカスタムロード機能をどこに置くかはわかりません。
誰でも、modernizrアプローチやその他の解決策（または他の何か）の考えや具体的なコードがありますか？私は援助に感謝します。
に役立ついくつかのpolyfillsに
https://github.com/paulirish/matchMedia.js/
希望を取り組んできました共通のものを1つのファイルにまとめ、さまざまな解像度のファイルを別々に用意しています）。私にはもっと単純な解決策と思われます。 –