Question

您好我有以下代码，我只需要工作在767px宽和低于（移动）

$(window).resize(function(){     

   if ($('#home-container').width() == 767 ){

          var totalCount;   //Keeps track of the total number of li's, shown or hidden.
          var currentCount; //Keeps track of the number of li's currently shown.

          $(document).ready(function () {
          //Count how many li's there are in total.
          totalCount  = $('.thumbnails li').size();
          //Start by showing three of them.
          currentCount = 3;
          adjustLiShown();

          $('#loadMore').click(function () {
          //Increase by three and update.
          currentCount += 3;
          adjustLiShown()
       });

       $('#showLess').click(function () {
       //Decrease by three and update.
       currentCount -= 3;
       adjustLiShown()
      });
  });

  function adjustLiShown() {
  //Hide all and then show the one with index under total count.

  $('.thumbnails li').hide().filter(':lt(' + currentCount + ')').show();
  //Only show "load more" if we haven't reached the total yet.

  $('#loadMore').toggle(currentCount < totalCount);
  //Only show "show less" if we are above the starting number.
  $('#showLess').toggle(currentCount > 3);
  }

  }

  });

我还添加了enquire.js以尝试帮助我进行测试，并成功检测到窗口的大小。但由于代码打算@media only screen and (max-width: 767px)（即使刷新），li项目在断点处也不会显示3个

我是否正确检测到窗口宽度？这个JS有什么问题吗？我没有在控制台中显示任何错误。

我有一个指向我服务器上托管的网站的链接。 http://gretchenward.com/SL2/

在767px及以下时，只有3个项目应显示。感谢

编辑：我刚刚决定将我的代码包装在

中

`$(document).ready(function() {      
var isMobile = window.matchMedia("only screen and (max-width: 767px)");

if (isMobile.matches) {`

它对我有用。

Answer 1

您可以使用设备模式＆amp;使用Chrome开发工具进行移动仿真：

您可以使用设备模式：

通过模拟不同的屏幕尺寸和分辨率（包括Retina显示屏）来测试响应式设计。

使用网络模拟器评估网站的效果，而不会影响其他标签的流量。

可视化并检查CSS媒体查询。

准确模拟触摸事件，地理位置和设备方向的设备输入。

通过将设备模式与现有的DevTools相结合，增强当前的调试工作流程。

按切换设备模式切换设备模式图标关闭图标，打开设备模式。启用设备模式后，图标将变为蓝色，视口将转换为设备模拟器。

您还可以使用键盘快捷键打开和关闭设备模式：

Ctrl + Shift + M （或 Cmd + Shift + < Mac上的kbd> M

JS基于媒体查询是否正常工作？

1 个答案: