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结构是一样的，砌体安装和初始化是一样的，除了类名之外，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
        }
    });
    });
});

我已删除了两者中的媒体查询，但没有任何区别。一个布局调整为移动窗口大小，另一个布局不调整。

没有

的CSS

砌筑项目：

.grid-album-item {

  width: 300px;
  float:left; 
}

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

砌体项目的样式

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

} 

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

one that doesn't

注意：两者都可以很好地适应狭长的桌面窗口，两者都只显示为一列。只是在移动屏幕上，我看到了差异。同样，没有任何媒体查询适用于他们中的任何一个。

赞赏的想法。关于如何进一步排除故障的想法也值得赞赏。

Answer 1

答案是

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