切换在移动设备上不起作用

Posted 2023-03-05

【中文标题】切换在移动设备上不起作用

【英文标题】：toggle doesn't work on mobile devices

【发布时间】：2016-08-11 19:23:45

【问题描述】：

我正在尝试建立一个响应式网站。 我以前从未使用过@media 标签，所以我不确定我是否做错了什么。

当窗口大小小于 550 像素时，导航应该是滑动切换菜单。

当我缩小浏览器窗口时它可以工作，但在我的 iPhone 上却不行。 我希望导航更改为 550px 的切换，标题高度更改为切换高度 (2em)。

我希望你能帮助我。

html：

<meta name="viewport" content"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">


<div id="header">
    <section id="menubar">
        <ul>
            <li><a class="menubutton" href="#menu"><img src="images/menu.png" /></a></li>
        </ul>
    </section>
        <nav class="nav">
            <ul>
                <li><a href="test.html">test</a></li>
                <li><a href="test.html">test</a></li>
                <li><a href="test.html">test</a></li>
                <li><a href="test.html">test</a></li>
                <li><a href="test.html">test</a></li>
            </ul>
        </nav>
</div>

和css：

ul 
margin:0px;
padding:0px; 

li 
list-style:square;
font-weight:100;
color:#000000;
line-height:1em;
padding:0em; 

a text-decoration: none; 

div#header 
position: fixed;
height: 6.250em;
width: 100%;
background-color: #fff;
top: 0;
z-index: 999; 

#menubar 
display:block;
background:#ffffff; 

#menubar ul 
display:block;
width:2em;
padding:0.9em; 

#menubar ul li 
display:inline; 

#menubar ul li a.menubutton 
display:none; 

#menubar img 
width:90%;
height:auto;
max-width:100%; 

nav ul 
display:block;
position: absolute;
left: 15%;
bottom: 0.625em;
font-size: 0.875em; 

nav ul li 
display:inline;
margin:0em 0.625em 0em 0em; 

nav ul li a 
color:#000; 

nav ul li a:hover 
color:#cc9900; 

nav ul li a.active 
color:#cc9900; 

@media screen and (min-width:600px) 
nav.nav 
    display:block !important;



@media screen and (max-width:550px) 
#menubar ul li a.menubutton 
    display:block;
   
nav 
    display:none;
    height:auto;

nav ul li 
    display:block;
    margin:0.2em 0em 0.2em 0em;



@media screen and (max-width:550px) 
div#header 
height: 2em !important;


@media screen and (max-width:550px) 
div#content 
top: 2em !important;

【问题讨论】：

什么不起作用？

当窗口尺寸小于 550px 时，nav 应该是一个滑动切换菜单。

请使用该信息更新您的问题。您还必须在问题中说明出了什么问题，以及您预计会发生什么。

好的，改了，谢谢！

Np，只要您在这里提出问题，请记住这一点。人们需要确切地知道出了什么问题，以及您期望发生什么来帮助您（通常）。

【参考方案1】：

我的技术是，在每次媒体查询之后，我都会将一个元素染成深颜色，这样我就可以看到什么时候发生了。

@media screen and (max-width: 320px) 
  header  background-color: red; 

对我来说 - 320px = 红色，480px = 橙色，760px = 绿色

问候;s

【讨论】：

谢谢 satinez，我试过了。但它仍然只适用于浏览器。即使我只使用带有颜色的小代码，也会有变化，但在我的 iPhone 上 - 什么都没有。

- Iphone 的分辨率是多少？ - 你是否在 HTML 中添加了正确的元标记？ - 缩放是否为 100%？也许在 Meta 中留下最大尺度。

也许你可以给我们一些示例站点，或者用 jsfiddle 构建它。所以我们可以更好地看到并提供帮助。

查看 www.niklasheinecke.com/test

好的，谢谢。我看到了错误。 1. Mediaquery 工作正常。 2. 你必须定义当你点击“HamburgerIcon”时会发生什么，我没有看到它定义。此切换未在某处定义，对吗？ 3.你可以只用css做，也可以和js混用。