Question

jQuery(function($) {
    var feed = new Instafeed({
          get: 'user',
          userId: 1094499841,
          clientId: '0f6a6d6496d04eecaa5996870bb2af17',
          accessToken:    '178142608.0f6a6d6.27edbb518cad4d3eadcc7f3ec5995c45',
          resolution: 'thumbnail',
          {% if screen.width <= 900 %}
            limit: 9,
          {% else %}
            limit: 16,
          {% endif %}
          sortBy: 'most-recent'
      });
    feed.run();
});

我希望将手机上的Instagram照片限制为9，而平板电脑或台式机则为16。这是在shopify theme.liquid文件中完成的。我认为正在发生的事情是屏幕宽度没有被检测到，因为现在无论屏幕尺寸如何，它都会拉出16张照片。

Answer 1

我对Liquid的体验有限 - 是screen even exist吗？

尽管如此，使用window.innerWidth或jQuery的.width()方法只能使用JavaScript。这将为您提供视口的宽度。在移动设备上，这通常也是显示器的宽度（在当前方向！），但在桌面上，这可能无法反映显示器的总宽度。

jQuery(function($) {
    var feed = new Instafeed({
          /* */
          limit: (window.innerWidth <= 900 ? 9 : 16)
      });
    feed.run();
});

要获取显示尺寸，您可以尝试window.screen.width或window.screen.availWidth。您通常不应该关心显示器的大小 - 如果您正在为多个设备开发，只有视口的大小才对您真正重要，因为视口大小将始终强加您的设计约束。

我尝试在您的设计中取得平衡，所有设备都会看到大致相同数量的信息，无论大小/方向如何，因为大多数设备都需要调整大小或重新定位。

一个优秀的边缘案例是iPad 2，其分辨率为1024x768。当用户以纵向方式加载您的网站，接收9张图像，然后旋转到横向时会发生什么？

Answer 2

谢谢@Oka和@DanO。你对屏幕宽度与窗口宽度的看法是对的。桌面上的某个人可能会从一个小窗口开始，然后最大化它，在这种情况下，显示的照片太少。因此，我决定使用移动媒体查询隐藏CSS中的额外照片，我最初因为某些原因避免了这些问题：

    #instafeed a {
      position: relative;
      float: left;
      overflow: hidden;
      width: 12.5%;
      width: -webkit-calc(100% / 8);
      width: calc(100% / 8);
      opacity: .75;
      filter: alpha(opacity=75);
      -webkit-transition: all 200ms ease;
      -moz-transition: all 200ms ease;
      -ms-transition: all 200ms ease;
      -o-transition: all 200ms ease;
      transition: all 200ms ease;
    }
@media (max-width: 768px){
  #instafeed a {
    width: -webkit-calc(100% / 3);
    width: calc(100% / 3);
    &:nth-child(10),&:nth-child(11),&:nth-child(12),&:nth-child(13),&:nth-child(14),&:nth-child(15),&:nth-child(16){
      display: none;
    }
  }
}

如何根据屏幕宽度限制API响应？

2 个答案: