移动版式未根据屏幕尺寸进行调整

如何解决移动版式未根据屏幕尺寸进行调整

我创建了一个网站，并在Firfox开发人员工具的帮助下开发了可重新定位的前端（以测试不同的屏幕尺寸）。既然我已经部署了Web应用程序，那么我将面临一个问题。

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

我已经使用了这个标签，但是它似乎无法解决问题。

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

我已经使所有css响应，并且仅出现问题，移动布局上的页面与设备的大小不同。所以我想知道，如何将页面调整为与设备相同的大小？

Here 是一个JsFiddle，它具有我网站的 base 布局
Here 是具有网站实际内容的JsFiddle

可以在https://piaweirather.de/下找到该网站，在台式机和移动设备上对其进行测试，您将明白我的意思。

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

解决方法

经过数小时的搜索，我发现了问题。 似乎overflow: hidden;和
position: absolute;并不太好。
在我的CSS文件中删除此部分后，问题消失了：

.navigation {
    position: absolute;
}

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

tldr：如果要定位移动市场，请不要结合使用overflow: hidden和position: absolute。