How to detect device is mobile when the website is clicked through TikTok and instagram?

I am trying to detect that a device is mobile in order to render the screen differently. We have a 4 column grid layout on desktop and want to display only 1 or 2 columns if the device is mobile.

This is the existing code:

  window.addEventListener(
    "resize",
    function (event) {
      if (event.target.innerWidth > 700) {
        setColumns(4);
      } else if (
        event.target.innerWidth < 700 &&
        event.target.innerWidth > 600
      ) {
        setColumns(3);
      } else if (
        event.target.innerWidth < 600 &&
        event.target.innerWidth > 400
      ) {
        setColumns(2);
      } else {
        setColumns(1);
      }
    },
    true
  );

It seems that this logic is good enough to only show 2 columns when I am on my iPhone via my Chrome browser. However, when I try clicking on the link to our website through a TikTok profile, it seems that we still display 4 columns. Why is this different than opening it via my mobile Chrome browser and how would you recommend fixing this? Thanks!