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

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？

不过，这应该可以通过 JavaScript 使用 window.innerWidth 或 jQuery 的 .width() 方法来实现。这将为您提供视口的宽度。在移动设备上，这通常也是显示器的宽度（在其当前方向！），但在桌面上，这可能不会反映显示器的总宽度。

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

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

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

一个很好的边缘案例示例是 iPad 2，它的分辨率为 1024x768。如果用户以纵向方式加载您的网站，收到 9 张图片，然后旋转为横向方式，会发生什么情况？

Answer 2

谢谢@Oka 和@DanO。关于屏幕宽度与 window 宽度，您是正确的。桌面上的某些人可能会从一个小的 window 开始，然后将其最大化，在这种情况下，显示的照片会太少。所以我决定用移动媒体查询隐藏 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 响应？

How do I limit my an API response based on screen width?

jquery

shopify