Use

window.innerWidth

这解决了我的问题

试试这个

getData(){
    if(window.innerWidth <= 768) {
      alert('mobile view')
      return;
    }

   //else function will work

    let body= {
      "key" : 'keyValue'
    }
    this.dataService.getData(body).subscribe(
      (data: any) => {
        this.myData = data
      }
    )
}

Javascript提供了不止一种方法来检查视口宽度。如您所注意到的，innerWidth不包括工具栏宽度，而且工具栏宽度在不同的系统中是不同的。还有outerWidth选项，它将包括工具栏宽度。Mozilla Javascript API声明:

窗口。outerWidth获取浏览器窗口外部的宽度。 它表示包括边栏在内的整个浏览器窗口的宽度 (如果展开)，窗口chrome和窗口调整边框/句柄。

javascript的状态是这样的，我们不能在每个平台上的每个浏览器中都依赖于outerWidth的特定含义。

outerWidth在旧的移动浏览器上没有很好的支持，尽管它在主流桌面浏览器和大多数更新的智能手机浏览器上都得到了支持。

正如ausi所指出的，matchMedia将是一个很好的选择，因为CSS更好地标准化了(matchMedia使用JS读取CSS检测到的视口值)。但是，即使有了公认的标准，弱电的浏览器仍然会忽略它们(在这种情况下，IE < 10，这使得matchMedia至少在XP消失之前不是很有用)。

总之，如果您只针对桌面浏览器和更新的移动浏览器进行开发，那么outerWidth应该能够满足您的需求，但也有一些注意事项。

实现光滑滑块，并根据分辨率在块中显示不同数量的幻灯片(jQuery)

   if(window.matchMedia('(max-width: 768px)').matches) {
      $('.view-id-hot_products .view-content').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
        dots: true,
      });
    }

    if(window.matchMedia('(max-width: 1024px)').matches) {
      $('.view-id-hot_products .view-content').slick({
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 4,
        dots: true,
      });
    }

这是前面提到的依赖于通过CSS更改内容并通过Javascript读取的方法的替代方法。这种方法不需要窗口。matchMedia或Modernizr。它也不需要额外的HTML元素。它通过使用HTML伪元素来“存储”断点信息:

body:after {
  visibility: hidden;
  height: 0;
  font-size: 0;
}

@media (min-width: 20em) {
  body:after {
    content: "mobile";
  }
}

@media (min-width: 48em) {
  body:after {
    content: "tablet";
  }
}

@media (min-width: 64em) {
  body:after {
    content: "desktop";
  }
}

我以body为例，你可以使用任何HTML元素。您可以在伪元素的内容中添加任何字符串或数字。不一定要“移动”等等。

现在我们可以通过以下方式从Javascript中读取这些信息:

var breakpoint = window.getComputedStyle(document.querySelector('body'), ':after').getPropertyValue('content').replace(/"/g,'');

if (breakpoint === 'mobile') {
    doSomething();
}

通过这种方式，我们总是可以确保断点信息是正确的，因为它直接来自CSS，我们不需要通过Javascript来获得正确的屏幕宽度。

也许更好的做法是不对文档的宽度进行js作用域，而是通过css @media查询进行某种更改。使用这种方法，你可以确保JQuery函数和css的变化是同时发生的。

css:

#isthin {
    display: inline-block;
    content: '';
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media only screen and (max-width: 990px) {
    #isthin {
        display: none;
    }
}

jquery:

$(window).ready(function(){
    isntMobile = $('#isthin').is(":visible");
    ...
});

$(window).resize(function(){
    isntMobile = $('#isthin').is(":visible");
    ...
});