响应性无法正常工作，但仅在横向模式下的移动设备上

Question

我对 Web 开发和 Stack Overflow 都很陌生，所以我希望这个问题不违反任何规则。

我在学习 Web 开发时正在创建个人网站，但我遇到了响应能力问题。当我在 Google Dev 工具上测试该网站时，该网站在所有窗口大小下都能完美运行。无论我如何使用开发工具上的设备工具栏调整窗口大小，所有应该响应的东西都非常好。

但是，当我使用 Safari 或 Chrome 并且仅在横向上查看我的 iPhone 12 上的网站（尚未在其他型号上测试过）时，它开始表现得很奇怪。导航栏的宽度应该始终为浏览器宽度的 100%，无论是在展开时，即在较大的屏幕尺寸下和不显示汉堡时，还是在折叠时，即在较小的屏幕上和显示汉堡时。但是，在移动设备上，第一次加载页面时一切都很好，但是当您更改为横向并返回纵向时，导航栏会缩小，即不占据浏览器的整个宽度。

我不知道为什么......

该网站可以在这里访问：www.imtiago.world 源码在这里：https://github.com/brandaspt/brandaspt.github.io

提前感谢您的帮助！

编辑： 我想问题出在我的导航栏上，因为这个导航栏的现场演示也发生了同样的情况：https://jsfiddle.net/2owsr9pz/ 这是我唯一的媒体查询：

@media only screen and (max-width: 600px) {
  .top-nav-links {
    display: none;
  }

  .top-nav-burger {
    display: block;
  }

  .close-button {
    display: none;
  }
}

Answer 1

我也会在你的 css 中使用方向，通过查看你的代码，你只使用屏幕大小。这是一个关于屏幕尺寸的简单用法的演示。

@media only screen and (min-device-width : 768px) and (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media only screen and (min-device-width : 768px) and (orientation: portrait) {
  body {
    flex-direction: column;
  }
}