jquery砌体不适应移动视口

我有两个Jquery砌体的安装，就我而言，彼此是相同的。其中一个调整为移动视口，另一个不调整。jquery砌体不适应移动视口

当我做手机故障排除，由砖石写的风格

第一：

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

第二：

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

事业部结构是一样的，砌体安装一个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 
     } 
    }); 
    }); 
});

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

CSS的，做一个不

砌筑项目：

.grid-album-item { 

    width: 300px; 
    float:left; 
}

的CSS的作品之一：没有样式的容器

风格为砖石项目

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

}

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

one that doesn't

注意：两个调整细到窄长桌面窗口，都显示为只有一列。这只是在移动屏幕上，我看到了不同之处。再次，没有媒体查询适用于他们中的任何一个。

意见赞赏。关于如何解决这一问题的想法也值得赞赏。

来源

2017-07-02 Natalia

答案是

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

来源

2017-07-06 16:16:29 Natalia

jquery砌体不适应移动视口

回答

相关问题