移动端模式屏幕尺寸显示异常求助（Dev/生产环境均存在）

核心原因：缺失Viewport Meta标签 #

这是移动端适配最典型的问题——浏览器会默认把移动端页面按桌面端视口缩放，导致调试时工具显示的宽度和实际选择的尺寸不匹配。SvelteKit不会自动添加这个关键标签，必须手动配置。

解决步骤 #

1. 找到SvelteKit的根布局文件（通常是src/routes/+layout.svelte），在其中添加viewport元标签：

<svelte:head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</svelte:head>

2. 重启开发服务器，再打开开发者工具调试移动端模式，此时显示的宽度应该会和你选择的350px匹配。

其他排查方向（若添加viewport后问题仍存在） #

• 检查是否有硬编码的宽度设置：确认HTML/body或全局容器是否被强制设置了width: 900px、min-width: 900px这类属性，哪怕移除自定义样式，也要排查是否有框架默认的固定宽度配置
• 临时禁用Tailwind插件：你的tailwind.config.js配置无明显异常，可尝试移除@tailwindcss/typography插件，排除插件冲突可能性
• 检查浏览器调试工具设置：确认工具的缩放比例是100%，没有误触缩放按钮；同时检查设备像素比（DPR）设置是否正常
• 排查SvelteKit全局容器：查看根布局中是否存在固定宽度的容器元素，比如添加了w-[900px]这类Tailwind硬编码宽度类

补充提示 #

你提到先做桌面端再适配移动端的方式是不良实践，后续项目建议采用「移动端优先」的开发流程，既符合Tailwind工具类的设计逻辑，也能从根源减少这类适配问题。

内容的提问来源于stack exchange，提问作者Havelex