レスポンシブデザインでjavaScriptを条件付きで読み込みます

StackOverflow https://stackoverflow.com/questions/8860650

質問

私はかなり簡単であるべきだと思う何かをしようとしていますが、解決策の簡単な説明は見つかりませんでした。

私は最初にモバイルのレスポンシブなWebサイトを構築しています（デフォルトとして幅320px幅）。その小さな解像度では、サイトは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);
}

私が話していることをするためのさまざまな方法を見つけました。

  1. Modernizr "Load"関数（正式にはyesnope.js）を使用できます。
  2. このリンクに記載されているように、ニコラス・ザカス「ismedia」関数を組み込んだカスタム関数を使用する メディア固有のJavaScript また
  3. のように「screenwidth」変数を使用したカスタムJavaScript関数
    var screenWidth = (screen.width < 768) ? true : false;
    で説明されているように 現実世界のメディアクエリ

JavaScriptの知識が限られているため、スクリプトのために機能するこれらのアプローチのいずれかを取得するためにコードを実際に書くことができませんでした。誰かがここで私を助けることができますか？

私はアプローチを特に好みません私はそれがクロスブラウザなどを動作させたいだけです。私の感覚は Modernizr アプローチは、この機能を最大数のユースケースで機能させるための最も堅牢で安定した方法ですが、私はそれを完全に確信していません。 Modernizrを変更したことがないので、どのように書く方法とカスタムロード機能を置く場所がわかりません。

Modernizrアプローチまたは他のソリューション（または他の何か）について考えたり特定のコードを持っている人はいますか？私は支援に大いに感謝しています。

役に立ちましたか？

解決

Modernizrは、Modernizr.mq（）関数にメディアクエリが適用されることを確認できます

あなたはそれをあなたがそれをこのように一致させたいとあなたのメディアクエリに渡します

if(Modernizr.mq('all and (min-width: 768px)')) {
    // Equal height code here
}

ここで、最小幅が768pxを超えたら、関数内のコードが呼び出されるので、等しい高さコードが等しくなります。

他のヒント

MatchMediaを使用してみることができます。これにより、メディアクエリに基づいて特定のJSをロードできます。

https://developer.mozilla.org/en/dom/window.matchmedia

ポール・アイリッシュはいくつかのポリフィルに取り組んでいます

https://github.com/paulirish/matchmedia.js/

お役に立てれば

イアン

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top