關於javascript跨瀏覽器寬度解決方案

Question

我正在嘗試 devise 跨瀏覽器解決方案，以便在 javascript 中獲取當前設備寬度（以像素為單位），以便與平板電腦和移動設備的引導程序斷點相對應。 （我這樣做是有原因的，因為這個邏輯必然會檢測設備方向，所以請開玩笑。）最好的現代解決方案是什么來檢測這個並在 Safari、Edge、Chrome 和 Firefox 上產生一致的值？

到目前為止，這是我用來檢測此問題的 javascript 方法。 到目前為止，我正在使用 jquery 來檢測設備寬度。

export function isMobileBrowser(){
  let windowWidth =
$(window).width();
  let check = windowWidth <= 575.98 //bootstrap small device widths, mobile phones
  return check;
}

export function isTabletBrowser(){
let windowWidth =
$(window).width();
   let check = windowWidth <= 991.97 //bootstrap medium device widths, tablets.
   return check;
}

注意：我嘗試過使用用戶代理，但我發現這可能不是最可靠的答案。 （老實說，包含有關此問題的評論的 StackOverflow 帖子很舊，但我不想冒任何風險。這是該線程只是為了滿足您的好奇心： 檢測設備是否為平板電腦）。

Answer 1

根據 w3schools，您可以使用window.screen並獲取屏幕本身的高度和寬度，而不是瀏覽器 window。

const { width, height } = window.screen;