jquery masonry 不适应移动视口

Question

我安装了两个 Jquery Masonry，就我而言，它们彼此相同。其中一个适应移动视口，另一个不适应。

我做手机排错的时候，Masonry写的样式是

第一个：

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

第二个：

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

Div 结构相同，Masonry 安装和初始化相同，css 除 class 名称外相同。

// 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
        }
    });
    });
});

我已经删除了两者中的媒体查询，这没有任何区别。一种布局会根据移动设备 window 大小进行调整，而另一种则不会。

CSS 不

砖石项目：

.grid-album-item {

  width: 300px;
  float:left; 
}

CSS 对于有效的：容器没有样式

砌体项目的样式

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

}

都可以在这里查看 - one that works

one that doesn't

注意：两者都可以很好地适应窄长桌面window，两者都只显示为一栏。我只是在移动屏幕上看到了不同之处。同样，它们中的任何一个都没有媒体查询。

想法赞赏。关于如何进一步解决此问题的想法也很受欢迎。

Answer 1

答案是

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

jquery masonry 不适应移动视口

jquery masonry does not adjust to mobile viewport

jquery

mobile

jquery-masonry