移动布局未根据屏幕尺寸调整

Question

我已经创建了一个网站并开发了前端以在 Firfox 开发者工具的帮助下进行响应（以在不同的屏幕尺寸上进行测试）。现在我已经部署了我的网络应用程序，但我遇到了一个问题。

在移动设备上，布局与开发者工具上的布局不同，屏幕尺寸相同。该页面的分辨率为 1920px x 1080px，只是放大了（见图）

我已经使用了这个标签，但它似乎并没有解决问题。

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

我已将所有 css 设置为响应式，但问题仅在于，移动布局上的页面与设备的大小不同。所以我想知道，如何调整我的页面，使其与设备大小相同？

Here 是我网站
的 base 布局的 JsFiddle Here 是具有网站内容的JsFiddle

该网站位于：https://piaweirather.de/，在桌面和移动设备上测试它，您就会明白我的意思。

非常感谢任何帮助，如果您需要更多信息，请随时问我。

Answer 1

经过几个小时的搜索，我找到了问题所在。似乎 overflow: hidden; 和
position: absolute; 不能很好地结合在一起。
在我的 CSS 文件中删除这部分后，问题消失了：

.navigation {
    position: absolute;
}

如果您需要 position: absolute 的功能，我建议您改用 position: fixed。

tldr：如果您想瞄准移动市场，请不要结合使用 overflow: hidden 和 position: absolute。

Mobile layout not adjusted to screen size