2017-07-02 16 views
0

私はJquery Masonryを2つインストールしています。そのうちの1つはモバイルビューポートに合わせて調整し、もう1つは調整しません。jquery masonryがモバイルビューポートに調整されていません

doesn't workworks

私は携帯のトラブルシューティングを行うと、フリーメーソンによって書かれているスタイルは

最初のものである:

<div id="list_of_albums" style="position: relative; height: 484.656px;" class="masonry"> 

秒:

<div id="post-area" class="masonry" style="position: relative; height: 2424px;"> 

事業部の構造同じです、Masonryはndの初期化は同じですが、cssはクラス名を除いて同じです。

// masonry customization 
jQuery(document).ready(function($) { 
    var post_area = $('#list_of_albums'); 
    post_area.imagesLoaded(function(){ 
     post_area.masonry({ 
     // options… 
     columnWidth:1, 
     isAnimated: true, 
     animationOptions: { 
      duration: 400, 
      easing: 'linear', 
      queue: false 
     } 
    }); 
    }); 
}); 

私は両方でメディアクエリーを削除しており、何の違いもありません。 1つのレイアウトはモバイルウィンドウのサイズに合わせて、もう1つは調整しません。作品1用

.grid-album-item { 

    width: 300px; 
    float:left; 
} 

はCSS: 石工項目

のコンテナ

スタイル用なしのスタイルではない

石工アイテムを行ういずれかの

CSS

#post-area .post { 
    width: 300px; 
    float: left; 

} 

ここでは、どちらも見ることができます - one that works

one that doesn't

注:両方は、狭い長いデスクトップウィンドウに一つだけの列として表示の両方を微調整します。それは私が違いを見るモバイル画面上にあります。ここでも、いずれのメディアクエリもその場所には存在しません。

アイデアありがとうございます。これをさらにトラブルシューティングする方法のアイデアも高く評価されています。

答えて

0

答えは

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
です
関連する問題