我正在开发一个带有固定侧边导航的 RWD 网站,当在比 iPad 小的设备上查看时,该导航适合页面顶部。我遇到的问题是,当我在 iPad 上将视图切换为垂直时,页面顶部的导航菜单消失了。据我所知,这只发生在 iPad 上。
(请记住,这仍在开发中,所以如果您发现任何错误,请告诉我!)
我正在开发一个带有固定侧边导航的 RWD 网站,当在比 iPad 小的设备上查看时,该导航适合页面顶部。我遇到的问题是,当我在 iPad 上将视图切换为垂直时,页面顶部的导航菜单消失了。据我所知,这只发生在 iPad 上。
(请记住,这仍在开发中,所以如果您发现任何错误,请告诉我!)
在样式表的不同位置,您将菜单部分设置为display: none;
. 然后,您将依靠 @media 规则再次显示它们,但它们正从一些裂缝中掉下来(您正在和它们玩俄罗斯轮盘赌!)。
您可以测试桌面浏览器中发生的情况。慢慢调整 Chrome 的大小,当你达到 iPad 的宽度和高度时,你会看到所有菜单都消失了。我建议您在设置 @media 规则时使用这样的测试。
当 max-width 为 768px 时,您在style.css文件中将 display 设置为none ,这是 iPad 在水平模式下的宽度。
@media (max-width: 768px) {
[...]
.midnav {
display: none;
}
顺便说一句,如果您将 iPad 连接到计算机,那么如果您打开 Safari 并在“开发”菜单上选择连接的 iPad ,则可以使用 iPad 的元素检查器。这很酷,也很有帮助。