2

そう...

最高のモバイル アプリを推奨する、完全にレスポンシブな Web サイトを作成したいと考えています。アプリを json 文字列に格納し、$.ajax メソッドを使用して jquery を介してコンテンツ div (実際には、HTML5 を使用するセクション) にロードします。

<section id="content-wrapper" class="colums cols-12">
    <section id="content" class="gratisapps centered clearfix cols-12">
    </section>
</section>

この Web サイトをレスポンシブにするために (最初は 960 ピクセルの固定幅、小さい画面では流動的なレイアウトを使用したい)、12 列のグリッドを使用しました。ヘッダーとフッターはブラウザーの幅に合わせてスケーリングされますが、コンテンツはそうではありません。すべてのアプリが読み込まれているにもかかわらず、コンテンツ コンテナーに高さがないと、これは何か関係があると思います。

var _gratisApps;
function inladenApplicaties(){
$.ajax({
    type:"GET",
    dataType:"JSON",
    contenttype: "application/json",
    cache:false,
    url: "../_data/gratisapps.json",
    success:function(data){
        if(data != null && data.apps != null){
            //GET PORTFOLIOITEMS FROM JSON STRING
            _nieuweApps = data.apps;
            //VISUALIZE PORTFOLIOITEMS
            vizuGratisApplicaties();
        }
    },
    error:function(xhr, result, error){
        alert(result + " " + error);
    }
});
}
function vizuGratisApplicaties(){
var content = "";
$.each(_nieuweApps, function(key, nieuweApp){
    if(nieuweApp.soort == "nieuw")
    {   var queryString = nieuweApp.title.replace(/\s+/g, '%20');
        content += '<section class="app colums cols-2 clearfix">'
        + '<a href="detailpage.html?q=' + queryString + '">'
        + '<figure><img class="app-image" src="' + nieuweApp.image + '" /></figure>'
        + '<figcaption><h4>' + nieuweApp.title + '</h4></figcaption>' 
        + '</a>'
        + '</section>';
    }
});
$('#content.gratisapps').append(content);
}

これらのセクションはすべて左にフロートされ、幅は 14.58333% です。誰かがこの問題の解決策を持っていますか/それを修正する別の方法を知っていますか?

4

1 に答える 1

0

もう少し情報を提供できますか。コンテンツをどのようにスケーリングしていますか? 挿入されたコンテンツは、DOM が最初に読み込まれた後に生成されるためでしょうか?

于 2012-12-18T14:40:25.490 に答える