检测是移动打字稿上的用户没有发送新请求

Question

我在打字稿文件中有价值

readonly isMobile: boolean = false;

在 cosntructor 中，我要检查它是否适用于移动或桌面应用程序版本：

    if (window.navigator?.maxTouchPoints > 0) {
        this.isMobile = true;
    }

在 HTML 文件中，如果 isMobile 为真，我想要 show/hide 一些东西，并且一切正常，但如果我使用的是桌面版本，并且我手动调整屏幕大小以变小，isMobile仍然是错误的，我需要检查元素 >> select 移动设备并重新启动页面，然后如果 isMobile 为真，将显示基于内容，如果我将屏幕大小调整为喜欢手机屏幕？

Answer 1

在这种情况下，您可以监听 window resize 事件并设置 isMobile 值。

@HostListener('window:resize', ['$event'])
onResize(event) {
  // Check window size and do actions..
}

Answer 2

你可以这样使用：

window.onresize = () => {
  let isMobile = false;
  console.log('RESIZING ...', window.innerHeight, window.innerWidth);
  const mobileWidthThreshold = 375; // For example
  if (window.innerWidth <= mobileWidthThreshold) {
    isMobile = true;
  } else {
    isMobile = false;
  }
  console.log(isMobile);
}

检测是移动打字稿上的用户没有发送新请求

detect is user on mobile typescript without send new request

html

mobile

desktop

typescript

angular