0
メニューバーは、画面内で崩壊しました最大幅= 850ピクセルです。それは正しくデスクトップの異なるサイズで動作しています。 モバイルデバイスでは機能しません。 jqueryresponsivejavascriptmenu-barmedia-querycsshtml私の応答メニューはモバイルデバイスでは機能しません
$(document).ready(function(){
\t \t \t $(".showMenu").click(function(){
\t \t \t \t $(".objs").slideToggle("slow");
\t \t \t });
\t \t });
#menu{
\t background-color: gray;
\t height: 50px;
}
.obj{
\t display: inline-block;
background-color: wheat;
margin: 2px;
width: 100px;
text-align: center;
height: 26px;
border:0;
}
.showMenu {
\t display: none;
height: 100%;
background-color: inherit;
border: 0;
color: black;
outline: 0;
}
@media screen and (min-width: 850px){
\t .objs{
\t \t display: block !important;
\t }
\t .obj{
\t \t display: inline-block !important;
\t }
\t .showMenu{
\t \t display: none;
\t }
}
@media screen and (max-width: 850px){
\t .objs{
\t \t display: none;
\t \t width: 100%;
\t \t background-color: wheat;
\t }
\t .obj{
\t \t width: 90%;
\t }
\t .showMenu{
\t \t display: block;
\t }
}<!DOCTYPE html>
<html>
<head>
\t <title>Responsive Menu</title>
\t <link rel="stylesheet" type="text/css" href="menu.css">
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
\t <div id="menu">
\t \t <button class="showMenu">MENU</button>
\t \t <div class="objs">
\t \t \t <button class="obj">1</button>
\t \t \t <button class="obj">2</button>
\t \t \t <button class="obj">3</button>
\t \t \t <button class="obj">4</button>
\t \t \t <button class="obj">5</button>
\t \t \t <button class="obj">6</button> \t
\t \t </div>
\t </div>
</body>
</html>
は「= '<メタ名= "ビューポート" コンテンツで試してみてくださいコード化されただけで、以下の追加width = device-width、initial-scale = 1 ">'あなたのHTMLヘッドで – blonfu
それはworです私のために大丈夫です。 – Jainam