Bad Idea? Detect mobile with UserAgent Next.js

I have a component that I am showing/hiding with mediaqueries like this

const [selectedPlan, setSelectedPlan] = useState<PricingGridPlanType>('hobby');
<div className="hidden lg:block">
  <PricingGridHeader selectedPlan={'all'} />
  <PricingGridTable selectedPlan={'all'} />
</div>
<div className="block lg:hidden">
  <PricingGridHeader selectedPlan={selectedPlan} setSelectedPlan={setSelectedPlan} />
  <PricingGridTable selectedPlan={selectedPlan} />
</div>

const [selectedPlan, setSelectedPlan] = useState<PricingGridPlanType>('hobby');
<div className="hidden lg:block">
  <PricingGridHeader selectedPlan={'all'} />
  <PricingGridTable selectedPlan={'all'} />
</div>
<div className="block lg:hidden">
  <PricingGridHeader selectedPlan={selectedPlan} setSelectedPlan={setSelectedPlan} />
  <PricingGridTable selectedPlan={selectedPlan} />
</div>

I was thinking of using getInitialProps to get the UserAgent and detect a mobile device or other and pass down a isMobile: boolean prop. New component:

const [selectedPlan, setSelectedPlan] = useState<PricingGridPlanType>(isMobile ? 'hobby' : 'all');
<PricingGridHeader selectedPlan={selectedPlan} setSelectedPlan={setSelectedPlan} />
<PricingGridTable selectedPlan={selectedPlan} />

getInitialProps({ ctx }) {
  let isMobile = (ctx.req
    ? ctx.req.headers['user-agent']
    : navigator.userAgent).match(
      /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
    )
   
    return {
      isMobile: Boolean(isMobile)
    }
}

const [selectedPlan, setSelectedPlan] = useState<PricingGridPlanType>(isMobile ? 'hobby' : 'all');
<PricingGridHeader selectedPlan={selectedPlan} setSelectedPlan={setSelectedPlan} />
<PricingGridTable selectedPlan={selectedPlan} />

getInitialProps({ ctx }) {
  let isMobile = (ctx.req
    ? ctx.req.headers['user-agent']
    : navigator.userAgent).match(
      /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
    )
   
    return {
      isMobile: Boolean(isMobile)
    }
}

Is this unpredictable/would have some devices falling out of the match above? Is it just better to do the mediaquery?

7 Replies

Matvey•2y ago

change the UI depending on the screen size, not on the useragent. Mobile useragent doesn't necessarily mean that the screen is small.

mrnicericee•2y ago

Yes it’s better to do the media break points. Just take android, there are so many different phones and phone sizes

Unknown User•2y ago

Message Not Public

Develliot•2y ago

Also modern apple tablets have the same user agent as safari on desktop, you have to check for features like touch to tell the difference.

Unknown User•2y ago

Message Not Public

Develliot•2y ago

You should probably be doing something different for document with touch events and with breakpoints. User agent sniffing should be last chance saloon. "ontouchstart" in document.documentElement

Leonidas•2y ago

I would go for feature detection (screen size + touch device) pointer: coarse is a good css media query

Gaming

Programming

Bad Idea? Detect mobile with UserAgent Next.js