html - 在 iPad 上垂直查看时 Div 隐藏

Question

我正在开发一个带有固定侧边导航的 RWD 网站，当在比 iPad 小的设备上查看时，该导航适合页面顶部。我遇到的问题是，当我在 iPad 上将视图切换为垂直时，页面顶部的导航菜单消失了。据我所知，这只发生在 iPad 上。

（请记住，这仍在开发中，所以如果您发现任何错误，请告诉我！）

score 1 · Accepted Answer

在样式表的不同位置，您将菜单部分设置为display: none;. 然后，您将依靠 @media 规则再次显示它们，但它们正从一些裂缝中掉下来（您正在和它们玩俄罗斯轮盘赌！）。

您可以测试桌面浏览器中发生的情况。慢慢调整 Chrome 的大小，当你达到 iPad 的宽度和高度时，你会看到所有菜单都消失了。我建议您在设置 @media 规则时使用这样的测试。

score 1 · Accepted Answer

当 max-width 为 768px 时，您在style.css文件中将 display 设置为none ，这是 iPad 在水平模式下的宽度。

@media (max-width: 768px) {

  [...]

  .midnav {
    display: none;
  }

顺便说一句，如果您将 iPad 连接到计算机，那么如果您打开 Safari 并在“开发”菜单上选择连接的 iPad ，则可以使用 iPad 的元素检查器。这很酷，也很有帮助。

2 回答 2