next.js如何区分pc和mobile？答案

【问题标题】：How can I distinguish pc or mobile with next.js？next.js如何区分pc和mobile？
【发布时间】：2021-03-17 07:39:16
【问题描述】：

Nextjs 在用户查看页面之前已经在服务器端构建并渲染了 html。现在我无法在我的代码中区分真正的用户代理，因为它总是在服务器端渲染。有什么方法可以区分用户是在电脑上还是手机上？

【问题讨论】：

这能回答你的问题吗？ How to detect the device on React SSR App with Next.js?

标签： next.js

【解决方案1】：

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

如果您的目标是在移动设备上删除您在桌面设备上使用过的图像。我发现有用的是图片标签。我在这里输入代码

【讨论】：

我在这里所做的是我为移动设备放置了一个非常小的图像，最大为 600 像素。