jquery masonry 不适应移动视口答案

【问题标题】：jquery masonry does not adjust to mobile viewportjquery masonry 不适应移动视口
【发布时间】：2017-07-02 23:10:01
【问题描述】：

我有两个安装的 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

注意：两者都微调为窄长的桌面窗口，都只显示为一列。我只是在移动屏幕上看到了不同。同样，它们中的任何一个都没有媒体查询。

赞赏的想法。还赞赏有关如何进一步解决此问题的想法。

【问题讨论】：

标签： jquery mobile jquery-masonry

【解决方案1】：

答案是

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

【讨论】：