当我使用平板电脑访问网站时导航消失（横向模式）

Posted 2023-05-08

【中文标题】当我使用平板电脑访问网站时导航消失（横向模式）

【英文标题】：The nav disappear when I visit the website with a tablet (landscape mode)

【发布时间】：2019-10-17 04:59:49

【问题描述】：

我为响应式网站创建了一个菜单。

在宽度小于 768px 的普通浏览器中查看网站时，导航菜单项会堆叠并隐藏。用户需要单击切换标签以显示导航项。当浏览器宽度大于992px时，导航菜单项显示为一行。

我在 iPad 上打开网站时出现问题。如果用户首先在 iPad 上以纵向模式（宽度 = 768 像素）打开网站并单击切换标签以显示导航菜单，然后再次单击切换标签以隐藏导航菜单。现在如果用户将他的 iPad 旋转到横向模式（宽度 > 768px），导航菜单就会消失。

但如果用户在 iPad 上以纵向模式打开网站，然后将其旋转到横向模式而不单击切换标签，则导航菜单在横向模式下可用。

我正在使用基本的 jQuery。 我认为发生这种情况是因为使用“fadeToggle”时，我使用 display none 和 display block 播放，当我旋转平板电脑时，它无法识别分辨率发生变化。

我该如何解决这个问题？ 提前致谢。

//Open and close Nav
$(document).ready(function() 
  $(".open-nav").click(function() 
    $(".main-nav").fadeToggle(500);
    $(".open-nav").css("display", "none");
    $(".close-nav").css("display", "block");
  );
  $(".close-nav").click(function() 
    $(".main-nav").fadeToggle(500);
    $(".close-nav").css("display", "none");
    $(".open-nav").css("display", "block");
  );
);

header 
  width: 100%;
  height: 90px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #FFF;
  z-index: 9999;


.open-nav 
  width: 60px;
  height: 40px;
  background-color: red;
  display: none;
  text-align: center;


.close-nav 
  width: 60px;
  height: 40px;
  background-color: green;
  display: none;
  text-align: center;


.main-nav 
  float: right;
  height: 50px;
  margin-top: 20px;


.main-nav ul 
  list-style-type: none;


.main-nav ul li 
  float: left;
  padding: 0 15px;


.main-nav ul li a 
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  display: block;
  margin: 0;
  line-height: 50px;
  font-size: 16px;
  color: #000;
  text-decoration: none;


.main-nav ul li .btn-primary 
  color: #FFF;
  font-size: 18px;


.main-nav ul li a.btn-primary:hover 
  border-bottom: none;


.main-nav ul li a:hover 
  border-bottom: solid #ff0054 2px;


.active 
  border-bottom: solid #ff0054 2px;



/* Medium devices (tablets, 768px and 992px)*/

@media (min-width: 768px) and (max-width: 992px) 
  a.open-nav 
    display: block;
    margin-top: 20px;
  
  a.close-nav 
    display: none;
    margin-top: 20px;
    z-index: 1;
  
  .main-nav 
    display: none;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    float: none;
    z-index: 0;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 0;
  
  .main-nav ul 
    width: 100%;
    padding: 0;
    padding-top: 25%;
  
  .main-nav ul li 
    float: none;
    text-align: center;
    padding: 0;
  
  .main-nav ul li a 
    display: inline-block;
    font-size: 26px;
    margin: 0 30px 60px 30px;
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <div class="container">
    <a class="open-nav col-xs-3 hidden-md" title="Menu">Click to Open</a>
    <a class="close-nav col-xs-3 hidden-md" title="Menu">Click to Close</a>
    <nav class="main-nav">
      <ul>
        <li><a href="index.html" class="active" title="Home">Home</a></li>
        <li><a href="#" title="Link 1">Link 1</a></li>
        <li><a href="#" title="Link 2">Link 2</a></li>
      </ul>
    </nav>
  </div>
</header>

【问题讨论】：

从媒体中移除 .main-nav display none 属性

如果我从 CSS 中删除“不显示”，导航将在我访问页面时打开。我不希望这种情况发生。

使用隐藏可见性

我很抱歉@NishargShah 但它不起作用。 :(谢谢你的帮助。

你在使用 Bootstrap 吗？

【参考方案1】：

回答我自己的问题。以防万一其他人有同样的问题。

我解决了在我的 CSS 代码上添加另一个媒体查询的问题：

/* Large devices and landscape tablets (tablets or desktops, 993px and 1366px)*/
@media screen and (orientation: landscape) and (min-width: 993px) and (max-width: 1366px) 

    .main-nav 
        display: block!important;
    

感谢您的帮助。