my responsive menu doesn't work in mobile devices

Question

i made a responsive menu-bar that collapsed in screen max-width=850 pixel . it is working correctly in desktop different sizes . but doesn't work in mobile devices . jquery responsive javascript menu-bar media-query css html

 $(document).ready(function(){ $(".showMenu").click(function(){ $(".objs").slideToggle("slow"); }); });

 #menu{ background-color: gray; height: 50px; } .obj{ display: inline-block; background-color: wheat; margin: 2px; width: 100px; text-align: center; height: 26px; border:0; } .showMenu { display: none; height: 100%; background-color: inherit; border: 0; color: black; outline: 0; } @media screen and (min-width: 850px){ .objs{ display: block !important; } .obj{ display: inline-block !important; } .showMenu{ display: none; } } @media screen and (max-width: 850px){ .objs{ display: none; width: 100%; background-color: wheat; } .obj{ width: 90%; } .showMenu{ display: block; } }

 <!DOCTYPE html> <html> <head> <title>Responsive Menu</title> <link rel="stylesheet" type="text/css" href="menu.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> </head> <body> <div id="menu"> <button class="showMenu">MENU</button> <div class="objs"> <button class="obj">1</button> <button class="obj">2</button> <button class="obj">3</button> <button class="obj">4</button> <button class="obj">5</button> <button class="obj">6</button> </div> </div> </body> </html>

Answer 1

只需在下面编码的HTML标头标签中添加

<meta name="viewport" content="width=device-width, initial-scale=1">

my responsive menu doesn't work in mobile devices

Question

1 answers

solution1
2 ACCPTED 2016-05-25 07:22:54

my responsive menu doesn't work in mobile devices

Question

1 answers

solution1 2 ACCPTED 2016-05-25 07:22:54

solution1
2 ACCPTED 2016-05-25 07:22:54