我的响应式菜单在移动设备中不起作用答案

【问题标题】：my responsive menu doesn't work in mobile devices我的响应式菜单在移动设备中不起作用
【发布时间】：2016-05-25 07:07:04
【问题描述】：

我制作了一个响应式菜单栏，它在屏幕max-width=850 像素中折叠。它在不同尺寸的桌面中正常工作。但不适用于移动设备。 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>

【问题讨论】：

在你的 HTML 头部尝试<meta name="viewport" content="width=device-width, initial-scale=1">
它对我来说很好用。

标签： jquery responsive javascript menu-bar media-query css html jquery html css mobile responsive-design

【解决方案1】：

只需在下面添加编码的 html 标题标签

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

【讨论】：