我做了什么？

next/image设置 NextJs 项目，借助具有以下设置的组件为不同的屏幕尺寸提供不同的图像尺寸：

<Image
  src={image}
  alt={title}
  objectFit='cover'
  layout='responsive'
  placeholder='blur'
  width={320}
  height={240}
  sizes={width !== undefined ? `${Math.round(width)}px` : '100vw'}
/>

我期待什么？

所提供的图像在 Chromium DevTools 中指定了sizes桌面和移动视图。对于桌面视图，这似乎按预期工作。从图像的固有宽度分辨率 (512px) 和渲染宽度分辨率 (492px) 中可以看出。 桌面视图屏幕截图

发生了什么？

由于某种原因我无法弄清楚，Chromium 中的移动视图不会发生这种情况。这里，固有宽度分辨率为 1024px，尽管渲染分辨率也是 492px。 Mobile-View-Screenshot 老实说，我并不完全理解 next.config.js 设备和屏幕尺寸与 next/image 组件的尺寸和布局设置有何关系。希望论坛里的高人能赐教一下。

一般应用设置

应用程序堆栈

在专用的 Debian 机器上使用 docker-compose 来与 NextJs、Mongodb 和其他一些微服务（例如 Redis）和具有 Fast-API 的 Python Worker 一起进行暂存。

next.config.js

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

const withCss = require('@zeit/next-css')
const withPurgeCss = require('next-purgecss')

const { PHASE_DEVELOPMENT_SERVER …