0

I am trying to devise a cross-browser solution in order to get the current device width in pixels in javascript in order to correspond to bootstrap breakpoints for tablet and mobile devices. (There is a reason why I am doing this, since this logic is bound to detecting device orientation, so humor me.) What would the best modern solution be for detecting this and producing consistent values on Safari, Edge, Chrome, and Firefox?

Here are the javascript methods that I am using to detect this so far. I am using jquery to detect device width so far.

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;
}

Note: I have tried using user agent, but I have found that this might not be the most reliable answer. (Honestly, the StackOverflow post containing the comment regarding this issue was old, but I don't want take any risks. Here is that thread just incase your curious: Detect if device is tablet).

Baraiboapex
  • 11
  • 2
  • So what is your problem? – epascarello Oct 07 '22 at 14:03
  • Umm. [There's a dedicated API for getting the orientation](https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation). You don't need to infer it from the dimensions. It even has [an event](https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation#event_handlers) so you can react to it changing. – Quentin Oct 07 '22 at 14:13
  • There's also an [API for testing media queries](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) so you can use the same media queries you write in your CSS. – Quentin Oct 07 '22 at 14:15
  • @epascarello.I am looking for a modern solution that is cross-browser (I should have clarified that) is jquery still considered relevant for the task of detecting device width? – Baraiboapex Oct 07 '22 at 14:35
  • @Quentin. I am using the orientation API to detect device orientation and device width to detect the type of device. If the screen width is of the tablet width, I do not want to bother with orientation since the tablet screen is wide enough to accomodate the screen that I want to show at this point. However, if a mobile device is used, then that's when the orientation API kicks in. So really, it's not tied to orientation at all. My appologies. – Baraiboapex Oct 07 '22 at 14:51
  • @Quentin what I am looking for as I clarified earlier is a modern solution that is cross-browser that can detect device width that can work along side my implementation of the orientation API. – Baraiboapex Oct 07 '22 at 14:56
  • @Baraiboapex — Then the API for testing media queries is what you want. You can include media query orientation rules in the test. – Quentin Oct 07 '22 at 15:19

1 Answers1

-1

According to w3schools, you can use window.screen and get the height and width of the screen itself rather than the browser window.

const { width, height } = window.screen;
Ethan R
  • 338
  • 2
  • 9