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

【问题标题】：Mobile layout not adjusted to screen size移动布局未根据屏幕尺寸调整
【发布时间】：2020-12-17 07:33:28
【问题描述】：

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

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

我使用过这个标签，但它似乎无法解决问题。

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

我已使我的所有 css 响应，问题只是，移动布局上的页面与设备大小不同。所以我想知道，如何调整我的页面，使其与设备大小相同？

Here 是我网站的 base 布局的 JsFiddle
Here 是实际的 JsFiddle 网站内容

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

任何帮助将不胜感激，如果您需要更多信息，请随时问我。

【问题讨论】：

【解决方案1】：

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

.navigation {
    position: absolute;
}

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

tldr：如果您想瞄准移动市场，请不要将 overflow: hidden 和 position: absolute 组合在一起。

【讨论】：