时间戳

首页 > 解决方案 > 移动布局未根据屏幕尺寸调整

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

问题描述

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

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

在此处输入图像描述

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

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

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

这是一个带有我网站基本布局的
JsFiddle这是一个带有网站实际内容的

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

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

标签： htmlcssmobileresponsive-designfrontend

解决方案

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

.navigation {
    position: absolute;
}

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

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

推荐阅读