手机版问题答案

【问题标题】：Problems on Mobile Version手机版问题
【发布时间】：2018-02-25 00:54:34
【问题描述】：

我的响应式移动网站的 720x1240 版本有一个问题（css 和 html 问题）。

我网站的顶部在它的 div（可能是 NEWS_MOBILE div）内创建了一个不需要的垂直滚动！我不知道为什么......
我的切换菜单以奇怪的对角线轨迹从左到右打开，不会填满整个屏幕。我希望它像大多数页面一样垂直落下并 100% 填满屏幕。
我想通过单击链接关闭我的 div 菜单。
而且我还想了解为什么我的 CSS 代码边距不符合我的精确宽度 =(

下面我会给你我的 HTML 和 CSS 代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LeatherJacks || Official Website</title>


<!-- FAV ICON LOAD -->
<link rel="icon" type="image/png" href="07_FAVICON\favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="07_FAVICON\favicon-16x16.png" sizes="16x16" />



<!--CSS LOAD 1920px-->
<link rel="stylesheet" type="text/css" href="01_Responsive_1920px.css">




<!-- META TAGS -->

<link rel="stylesheet" media="(max-width: 1368px)" href="02_Responsive_1368px.css">
<link rel="stylesheet" media="(max-width: 1000px)" href="03_Responsive_1000px.css">
<link rel="stylesheet" media="(max-width: 816px)" href="04_Responsive_MOBILE.css">
<link rel="stylesheet" media="(max-width: 720px)" href="05_Responsive_MOBILE_720.css">
<link rel="stylesheet" media="(max-width: 360px)" href="06_Responsive_MOBILE_360x640.css">






<!--HTML-->

<body>

    <div id="TUDO_MOBILE">




<!-- NAVBAR MENU -->


  <div id="Menu_Mobile">

      <img src="03_Botões\04_WebSite_Mobile\LeatherLogo.png">


     <button type="button" class="Menu_Mobile_toggle" data-menu-mobile-toggle="">
      <span></span>
     </button>





<div id="Menu">

            <a href="#NEWS_MOBILE">NEWS</a>
            <a href="#Tudo_Shows_MOBILE">SHOWS</a>
            <a href="#Tudo_Music_MOBILE">MUSIC</a>
            <a href="#Tudo_Video_MOBILE">VIDEO</a>
            <a href="#Tudo_Merch_MOBILE">MERCH</a>
            <a href="#Tudo_Contact_MOBILE">CONTACT</a>

        <ul>
           <li><a href="https://facebook.com/leatherjacksofficial" target="_blank">
           <img src="03_Botões\02_WebSite\02_Facebook_Btn.png" width="13" height="23"/></a></li>



           <li><a href="https://www.youtube.com/channel/UCeufhZW3V2aFHp4Syqd85Dg" target="_blank">
           <img src="03_Botões\02_WebSite\03_YouTube_Btn.png" width="20" height="21"></a></li>



           <li><a href="https://instagram.com/maucorleatherjacks" target="_blank">
           <img src="03_Botões\02_WebSite\04_Instagram_Btn.png" width="23" height="23" /></a></li>



           <li><a href="https://twitter.com/leatherjacksgo" target="_blank">
           <img src="03_Botões\02_WebSite\05_Twitter_Btn.png" width="20" height="22" /></a></li>



           <li><a href="https://maucorleatherjacks.tumblr.com" target="_blank">
           <img src="03_Botões\02_WebSite\06_TumblR_Btn.png" width="10" height="21" /></a></li>



           <li><a href="https://open.spotify.com/artist/2dZQJyKb2RNAltV18ffumG" target="_blank">
           <img src="03_Botões\02_WebSite\07_Spotify_Btn.png" width="18" height="22" /></a></li>



           <li><a href="https://itunes.apple.com/br/album/the-lost-arks-of-rock-and-roll/id1225814414" target="_blank">
           <img src="03_Botões\02_WebSite\08_iTunes_Btn.png" width="15" height="22" /></a></li>

         </ul>

       </div>




   </div>









<div id="NEWS_MOBILE">

    <div id="Wrapper_News">

     <div id="News_1"><header align="left">


   <!--MANCHETE_1-->


  <h1>NEW WEBSITE</h1>
   </header>



  <!--CHAMADA - 1-->
  <p align="left">

  <!--TEXTO - NEWS 1-->

  LeatherJacks is finally debuting it´s New Website! <br> Check it out for more details here! <br /> <br /> 


      CONTINUE READING </p>



   </div><!--FIM DA DIV NEWS_1-->





  <div id="News_2">
    <header align="left">

     <!--MANCHETE_2-->
    <h1>DEBUT SHOW</h1>
    </header>





  <!--CHAMADA - 2--> 
    <p align="left">

    Check More about our Debut Show at Manifesto Pub! <br /> <br />

    CONTINUE READING </p>

    </div><!--FIM DA DIV NEWS_2-->






  <div id="News_3">
    <header align="left">




  <!--MANCHETE_3-->
  <h1>GET SOCIAL</h1>
  </header>





   <!--CHAMADA - 3-->  
  <p align="left">


  Follow us at Social Networks, <br /> stay tuned and be a Jacker with us! <br /> <br /> 

  CONTINUE READING </p>


  </div><!--FIM DA DIV NEWS_3-->

   <div id="ALL_NEWS">ALL NEWS</div><!--FIM DA DIV ALL NEWS-->

  </div>    <!-- FIM DO WRAPPER NEWS -->

</div>


















<div id="Tudo_Shows_MOBILE">

<div id="Container_Shows">

  <div id="Shows_Title">
   <img src="04_Imagens_WebSite\02_SHOWS\Elementos_Layout\Shows.png">
  </div> 


  <div id="Wrapper_Shows">
  <script charset="utf-8" src="https://widget.bandsintown.com/main.min.js"></script><a class="bit-widget-initializer" data-artist-name="LeatherJacks" data-display-local-dates="false" data-display-past-dates="true" data-auto-style="false" data-text-color="#FFFFFF" data-link-color="#F1C200" data-popup-background-color="#000000" data-background-color="#000000" data-display-limit="15" data-link-text-color="#000000"></a>
  </div>


  </div>

</div>













<div id="Tudo_Music_MOBILE">

 <div id="Title_Music">
  <img src="04_Imagens_WebSite\03_MUSIC\Elementos_Layout\Title_Shows.png">
 </div>

   <div id="Container_Music">
    <iframe src="https://open.spotify.com/embed/album/55KlGZCK0nlxsnlts8B8gj" frameborder="0" allowtransparency="true"></iframe>
   </div>

</div>












<div id="Tudo_Video_MOBILE">

<div id="Title_Video">
<img src="04_Imagens_WebSite\04_VIDEO\Elementos_Layout\Video_Title.png">
</div>


  <div id="Watch"><header><a href="https://www.youtube.com/channel/UCeufhZW3V2aFHp4Syqd85Dg/videos" target="_blank">Watch Our Videos</a></header>
  </div>


 <div id="Dentro_Video">
   <video id="Video_BG" preload="auto" autoplay="true" loop="loop" muted="muted">
    <source src="04_Imagens_WebSite\04_VIDEO\Elementos_Layout\Video_BG_1.webm"> 
   </video>
   </div>

   <div id="Post_Video"></div>

 </div>













<div id="Tudo_Merch_MOBILE">

 <div id="Merch_Title">
 <img src="04_Imagens_WebSite\05_MERCH\Elementos_Layout\Merch_Title.png"></div>

  <div id="Merch_Content">COMING SOON!</div>

</div>














<div id="Tudo_Contact_MOBILE">

 <div id="Form" action="send.php" method="POST" name="email"> 

   <form>
     <input type="text" placeholder="First Name" name="firstname" required onfocus="this.placeholder = ''" onblur="this.placeholder = 'First Name'">
     <br>
     <input type="text" placeholder="Last Name" name="lastname" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Last Name'">
     <br>
     <input type="text" placeholder="Email" name="email" required onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email'">
     <br>
     <input type="text" placeholder="Subject" name="subject" required onfocus="this.placeholder = ''" onblur="this.placeholder = 'Subject'">
     <br>
     <textarea type="text" placeholder="Your Message Here" name="message" required onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your Message Here'"></textarea>
     <br>
     <button type="submit" name="send">SEND</button>
     <br>

   </form>


     <div id="emails">

      <div id="tour">
      <p>For booking Tour and Gigs, please contact us at<br><p><a href="mailto:management@leatherjacksofficial.com" target="_top">management@leatherjacksofficial.com</a></p>
      </div>

      <div id="press">
      <p>For Press inquiries, please contact us at<br><p><a href="mailto:press@leatherjacksofficial.com" target="_top">press@leatherjacksofficial.com</a></p>
      </div>

     </div>

 </div>

</div>



























<!-- SCRIPTS -->



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript">
  </script>

<script>
$('a[href^="#"]').click(function(){
    var the_id = $(this).attr("href");

    $('html, body').animate({
        scrollTop:$(the_id).offset().top
    }, 'slow');
    return false;
});
</script>



      <script src="http://code.jquery.com/jquery-3.2.1.js"></script>
       <script type="text/javascript">

           $(document).ready(function(){
             $('.Menu_Mobile_toggle').click(function(){
             $('.Menu_Mobile_toggle').toggleClass('ativo');
             $("#Menu").toggle('.Menu_Mobile_toggle.ativo');
            });
           });

           $(document).click(function(e) {
             if ($(e.target).closest('.Menu_Mobile_toggle').length == 0) {
             $(".Menu_Mobile_toggle").removeClass('ativo');
            $("#Menu").hide();
           }
          });





      </script>





</body>
</html>

还有 CSS：

<style>


@font-face {
    font-family: "Bebas";
    src: url("06_Fonts/Bebas.eot") /* EOT file for IE */
}
@font-face {
    font-family: "Bebas";
    src: url("06_Fonts/BEBAS__.TTF") /* TTF file for CSS3 browsers */
}





* {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

html { 
   font-family:"Bebas", "Arial"; 
   font-size: 20px;
}



html, body { 
   margin:0; 
   overflow-x:hidden;
   width: 100%;
   height: 100%;
   background-color: #000;
}



#TUDO_MOBILE {
    width: 720px;
    height: 7440px;
    margin-top: 0px;
    margin-left: 0px;
}

#Menu_Mobile {

    width: 720px;
    height: 130px;
    margin-top: -10px;
    margin-left: 0px;
    text-align: center;
    background-color: #000;
    position: fixed;
    z-index:1;
}


#Menu_Mobile img {      /*LEATHERJACKS LOGO  */
    max-width: 260px;
    max-height: 64px;
    width: 100%;
    margin-top: 5px;
    float:left;
    margin-left: 30%;
    clear: right;
    clear: left;
    cursor: auto;
}


.Menu_Mobile_toggle {
    position: fixed;
    margin-top:2px;
    width: 80px;
    height: 80px;
    right: 10px;
    box-sizing: border-box;
    cursor: pointer;
    background: #000;
    border:none;
}


.Menu_Mobile_toggle span {
    display: block;
    width: 80px;
    height: 7px;
    background: #FFF;
    position: absolute;
    left:10px;
    top: 42px;
    transition:0.3s;
}

.Menu_Mobile_toggle span:before {
    content: '';
    background: #FFF;
    position: absolute;
    left:0;
    top: -30px;
    width:100%;
    height: 7px;
    transition:0.3s;

}

.Menu_Mobile_toggle span:after {
    content: '';
    background: #FFF;
    position: absolute;
    left:0;
    top: 30px;
    width:100%;
    height: 7px;
    transition:0.3s;
    border:none;

}


.Menu_Mobile_toggle.ativo span {
    background: transparent;
}

.Menu_Mobile_toggle.ativo span:before {
    top:0;
    left: 0;
    transform: rotate(45deg);
    transition:0.3s;
    height: 7px;

}

.Menu_Mobile_toggle.ativo span:after {
    top:0;
    left:0;
    transform: rotate(-45deg);
    transition:0.3s;
    height: 7px;

}



#Menu {
    text-align: center;
    position: absolute;
    width: 720px;
    height: 1240px;
    background-color: #000; 
    margin-left: 50px;
    opacity: 0.9;
    line-height: 100px;
    clear: both;
}


#Menu_Links a:link {
    max-width: 360px;
    width: 100%;
    margin-left: 40%;
    text-align: center;
    display: block;
    font-family: "Bebas";
    font-size: 80px;
    color: #FFF;
    text-decoration: none;
    line-height: 100px;
}

#Menu_Links ul { 
   margin: 0%;
   margin-top:0%;
   margin-left: 19%;
   padding:0%; 
   list-style-type:none;
}

#Menu_Links ul li { 
   padding: 20px;
   margin-top: 90px; 
   float:left;
}

#Menu_Links ul li a {   
   padding: 0 0 0 0px;
   width: 100%;
   height: 100%;
}

#Menu_Links img:link, #navbar_social img:visited {
    opacity:1;
}

#Menu_Links img:hover {
    opacity: 0.7;
    transition-duration: 0.3s;
}





/* PÁGINA */





#NEWS_MOBILE {
   position: absolute; 
   width: 720px;
   height: 1240px;
   margin-top: 160px;
   margin-left: 0px;
   background-image: url("04_Imagens_WebSite/01_NEWS/01_Elementos_Layout/BG-News-720.jpg");
   background-size: 100%;
}

#Wrapper_News {
    width: 720px;
    height: 1240px;
    margin-top: 0px;
    margin-left: 30%;
    background-color: transparent;
}






/* NEWS SECTION */

#News_1 {
    background:none;
    width: 720px;
    height:50px;
    margin-left:10%;
    margin-top: 0px;
}

#News_2 {
    background:none;
    width: 720px;
    height:50px;
    margin-left:10%;
    margin-top: 120px;
}

#News_3 {
    background:none;
    width: 720px;
    height:50px;
    margin-left:10px;
    margin-top: 120px;
}

#News_1 header, #News_2 header, #News_3 header {
    font-family: "Bebas";
    font-size: 30px;
    color: #bf2d63;

}


#News_1 p, #News_2 p, #News_3 p {
    font-family: "Arial";
    font-size:12px;
    color: #FFF;
}

#ALL_NEWS {
    font-family: "Bebas";
    font-size:40px;
    letter-spacing: 4px;
    color:#FFF;
    opacity: 0.8;
    max-width: 400px;
    width: 100%;
    height: 30px;
    margin-top: 50px;
    margin-left: 10%;
    background-color: #000;
    background-color: transparent;
}

/*FIM DO NEWS SECTION */








/* SHOWS */

#Tudo_Shows_MOBILE {
    width:720px;
    height: 1248px;
    margin-left: 15%;
    margin-top: 958px;
    position: absolute;
    background-color: #000;
}

#Container_Shows {
    max-width: 720px;
    max-height: 940px;
    width: 100%;
    height: 100%;
    margin-left: 5%;
    margin-top: 130px;
    position: absolute;
}

#Shows_Title {
    max-width: 220px;
    max-height:60px;
    width: 100%;
    margin-top: 0px;
    margin-left: 22%;

}

#Shows_Title img {
    max-width: 220px;
    max-height:60px;
    width: 100%;
    margin-top: 0px;
    margin-left: 25%;

}

#Wrapper_Shows {
    max-width: 720px;
    height: 894px;
    margin-left: 20%;
    margin-top: 50px;

}


#Wrapper_Shows script {
    max-width: 720px;
    max-height: 894;
    width: 100%;
    margin-left: 0%;
    margin-top: 80px;

}




/* FIM DAS DIVS DE SHOWS NO CSS */











/* CONTAINTER MUSIC */

#Tudo_Music_MOBILE {
    max-width:720px;
    max-height: 1200px;
    width: 100%;
    height: 100%;
    margin-left: 12%;
    margin-top: 1910px;
    position: absolute;
    background-image: url("04_Imagens_WebSite/03_MUSIC/Elementos_Layout/BG-Music-720.jpg");
    background-size: 100%
}


#Title_Music {
    max-width: 720px;
    max-height: 69px;
    width: 100%;
    margin-left: 0px;
    margin-top: 160px;
}


#Title_Music img {
    max-width: 200px;
    max-height: 54px;
    margin-left: 36%;

}

#Container_Music {
    max-width: 720px;
    max-height: 800px;
    width: 100%;
    margin-left: 8%;
    margin-top: 50px;
}

#Container_Music iframe {
    max-width: 550px;
    width: 100%;
    height: 500px;
    opacity: 0.9;
}




/* CONTAINER VIDEO */

#Tudo_Video_MOBILE {
    max-width: 720px;
    max-height: 894px;
    width: 100%;
    height: 100%;
    margin-left: 14px;
    margin-top: 2737px;
    position: absolute;
}


#Dentro_Video {
    position: absolute;
    top: 0;
    left: 0;
    z-index:-1;
    background-color: #000;
    margin-top: 130px;
}


#Dentro_Video video {
    width: 100%;
    height: 100%;
    background: transparent;
    z-index:0;
    opacity: 0.7;
}


#Title_Video {
    max-width: 250px;
    max-height: 69px;
    width: 100%;
    margin-left: 40%;
    margin-top: 140px;
    opacity: 0.7;
}

#Watch {
    width: 600px;
    height: 36px;
    margin-left: 24.8%;
    margin-top: 40%;
    position: relative;
    text-decoration: none;
}

#Watch header {
    font-family: "Bebas";
    font-size: 380%;
    color: #FFF;
    letter-spacing: 5px;
    text-decoration: none;
}


#Watch header a:link, #Watch header a:visited {
    font-family: "Bebas";
    font-size: 60%;
    color: #FFF;
    letter-spacing: 4px;
    text-decoration: none;
}


#Watch header a:hover {
    font-family: "Bebas";
    font-size: 60%;
    color: #FFF;
    letter-spacing: 3.7px;
    transition-duration: 0.7s;
    scale: (0.99, 0.99);
    text-decoration: none;
    /* color: #ff9b1a; */
    color: #f2237b;
    cursor: pointer;
}

#Watch header a:hover:after {
    font-family: "Bebas";
    font-size: 60%;
    color: #FFF;
    letter-spacing: 4px;
    text-decoration: none;
}

#Post_Video {
    max-width: 720px;
    width: 100%;
    height: 463px;
    background-color: #000;
}




/* CONTAINER MERCH */

#Tudo_Merch_MOBILE {
    max-width: 720px;
    height: 894px;
    width: 100%;
    margin-top: 3610px;
    margin-left: 14%;
    position: absolute;
    background-color:#000;
}


#Merch_Content {
    width: 100%;
    font-family: "Bebas";
    font-size: 200%;
    color: #FFF;
    margin-left: 50%;
}



#Merch_Title {
    max-width: 250px;
    max-height: 69px;
    width: 100%;
    margin-left: 33%;
    margin-top: 160px;
}






/* CONTAINER CONTACT */



#Tudo_Contact_MOBILE {
    max-width: 720px;
    height: 960px;
    width: 100%;
    margin-left: -4.5%;
    margin-top: 4480px;
    position: absolute;
    background-color:#000;
}


#Form {
    margin-left: 18%;
    margin-top: 120px;
}

#Form input {
    max-width: 570px;
    width: 95%;
    padding: 10px;
    font-family: "Bebas";
    font-size: 40px;
    font-color: #FFF;
    letter-spacing: 8px;
    border: 0;
    outline: 0;
    background: transparent;
    border-bottom: 1px solid white;
}


#Form textarea {
    max-width: 570px;
    width: 95%;
    padding: 10px;
    margin-top:30px;
    font-family: "Bebas";
    letter-spacing: 8px;
    width: 570px;
    height: 180px;
    font-size: 40px;
    color: #FFF;
    background-color: #000;
    resize: none;
    border: 0;
    outline: 0;
    background: transparent;
    border-bottom: 1px solid white;
}


#Form input, #Form textarea {
    color: red;
    text-shadow: 0px 0px 0px #000;
    -webkit-text-fill-color: white;
}


#Form input::-webkit-input-placeholder,
#Form textarea::-webkit-input-placeholder{
    color: white;
    text-shadow: none;
    -webkit-text-fill-color: initial;
}





#Form button {
    max-width: 591px;
    width: 100%;
    height: 68px;
    border: none;
    background-color: #4c0000;
    font-family: "Bebas";
    font-size: 45px;
    color: #FFF !important;
    letter-spacing: 10px;
    text-align: center;
    padding-top: -4px;
    opacity: 0.8;
}

#Form button:hover {
    transition-duration: 0.4s;
    background-color: #c60000;
    cursor: pointer;
    transform: scale(0.99, 0.99);
    opacity: 1;
}


#emails {
    max-width: 720px;
    max-height: 450px;
    width: 100%;
    background: none;
    margin-left: -6%;
    margin-top: 60px;
    position: absolute;
}

#tour {
    font-family: "Bebas";
    letter-spacing: 2px;
    font-size: 17px;
    color: #FFF;
    text-align: center;
    max-width: 1920px;
    width: 100%;
}

#press {
    font-family: "Bebas";
    letter-spacing: 2px;
    font-size: 17px;
    color: #FFF;
    text-align: center;
    max-width: 1920px;
    width: 100%;
}


#tour a:link, #press a:link {
    color: #c60000;
    text-decoration: none;
    font-size: 25px;
}

#tour a:hover, #press a:hover {
    color: red;
    text-decoration: none;
    transition-duration: 0.4s;
    letter-spacing: 1.94px;
}

#tour a:visited, #press a:visited {
    color: #c60000;
    text-decoration: none;
}



</style>

我哪里错了？请大家帮帮我！ =)

PS：该网站在台式电脑、平板电脑、Ipad 等设备上运行完美......它在大型设备上的响应速度非常快 =)

但不是移动... =(

非常感谢大家！

现在，当我在下拉菜单外单击时，我必须让我的 X 按钮回到汉堡形状...

当我点击我的下拉菜单链接时，如何使汉堡按钮进入初始状态（从 X 到 ||| ）？

这是我的脚本：

 <script type="text/javascript">

           $(document).ready(function(){
             $('.Toggle').click(function(){
             $('.Toggle').toggleClass('ativo');
             $("#Drop_Down").toggle('.Toggle.ativo');
            });
           });



           $(document).click(function(e) {
             if ($(e.target).closest('.Toggle').length == 0) {
             $(".Toggle").removeClass('ativo');
            $("#Drop_Down").hide();
           }
          });




      </script>

我需要让我的切换汉堡菜单在单击链接时恢复到初始状态。在 html 中，我为下拉菜单链接做了<a href="#" onclick="hide(mydiv)">，所以菜单正常关闭...但切换仍然是 X 形状。

当我在菜单外或任何地方单击时...它会关闭下拉菜单并返回到它的初始状态，正如预期的那样 =)

我 90% 都在我的网站上，但它在我的 Moto G3 中不合适... 360x640 分辨率不在我的网站中心...

发生了什么事，伙计们？ =(

Out of place

会是什么？

谢谢大家！！！

【问题讨论】：

标签： css menu toggle

【解决方案1】：

#Tudo -> remove overlfow-x: hidden;来自 CSS
在你的脚本中使用 slideToggle() 而不是 toggle()

http://api.jquery.com/slidetoggle/
在对链接执行点击操作时添加脚本。

例子：

$('#Drop_Down a').click(function(){
    $('.Toggle').toggleClass('ativo');
    $("#Drop_Down").toggle('.Toggle.ativo');
});

更具体 - 哪个边距不正确？它应该是什么样子？（一些图片？一些jsfiddle代码sn-p我们可以在哪里玩这个例子？）

【讨论】：

我是否删除了“overflow-x:hidden;”从 1920px css 代码还是 360px css 代码？
我仍然只有一个问题：当我点击我的汉堡菜单时，我的“下拉菜单”出现并且图标变成了 X 形状......好吧......所以当我点击任何地方时， “下拉菜单”关闭，我的汉堡菜单返回到初始状态。但是当我单击链接时（我使用“onclick = hide(dropdownmenu)”），我的菜单隐藏得很好......但是我的切换不会回到它最初的汉堡形状......我该怎么办，阿德里安？谢谢ssssss =)