0

Nextjs has built and rendered html in the server side before user views the page.Now I can't distinguish the real user-agent in my code,because it always render in server side. Is there any way to distinguish that user is on pc or mobile?

user15413207
  • 1
  • 1
  • 1
    Does this answer your question? [How to detect the device on React SSR App with Next.js?](https://stackoverflow.com/questions/59494037/how-to-detect-the-device-on-react-ssr-app-with-next-js) – Mellet Mar 17 '21 at 16:59

1 Answers1

0

<picture>
  <source type="image/webp" media="(max-width: 600px)" srcSet="/images/index-banner-dummy-mobile.webp"></source>
  <source type="image/png" media="(max-width: 600px)" srcSet="/images/tech.png"></source>
  <img alt={weeklyDeal[0].title} src={image} sizes="100vw" className="!object-fill showcase-main-image rounded w-full" style={{ position: "absolute", top: "0",left: "0",bottom: "0",right: "0",boxSizing: "border-box",padding: "0",border: "none",margin:
    "auto",display: "block",width: "0",height: "0", minWidth: "100%", maxWidth: "100%", minHeight: "100%", maxHeight: "100%", objectFit: "cover" }} importance="high" />
</picture>

If your goal is to remove images on mobile that you have used on desktop. What i found useful was picture tag. I used enter code here

Usman Ghani
  • 51
  • 4