Tailwind 中小于 475 像素的屏幕大小问题 CSS

Sizing issue on screen sizes less than 475px in Tailwind CSS

Reference image

我正在构建一个带有形状的虚拟网站，但屏幕大小存在一些问题。

您可以在上图中看到，在使用 Chrome DevTools 查看网站在不同屏幕尺寸下的外观时，网站存在一些尺寸问题。

我正在使用最新版本的 Tailwind 和 Next.js，但我仍然遇到这个烦人的空白。

有什么解决办法吗？

在 <Head> 元素中添加 initial-scale 和设备宽度属性以解决此问题 - 如果没有 initial-scale，浏览器不会尽其所能来填充可用内容视口宽度。

pages/index.js

<meta content="width=device-width, initial-scale=1" name="viewport" />

可以在 MDN