我是网络编程的新手，并且一直在寻找我自己的网站的一些代码。我喜欢这支笔并尝试过：https://codepen.io/rex50/pen/gzpvzq
我在meta中添加了视口标记，但它无法正常工作。它适用于任何其他手机（Android）但不适用于iPhone
这是HTML
<head>
<meta name="viewport" content="text/html; charset=ISO-8859-1, width=device-width, initial-scale=1">
<link rel="stylesheet" href="estilos/main.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="cuerpo">
<!-- ---------MENU------------ -->
<p class="menu">Menu</p>
<nav>
<ul>
<li>
<a href="index.html">Inicio</a>
</li>
<li>
<a href="catalogo.html">Catálogo</a>
</li>
<li>
<a href="#qualify">Servicios</a>
</li>
<li>
<a href="#projects">Contacto</a>
</li>
<li>
<a href="#contact">Acerca</a>
</li>
</ul>
</nav>
</div>
</body>
这是CSS，它在main.css中：
*{
margin: 0px;
padding: 0px;
}
.cuerpo{
font-size: 180%;
line-height: 140%;
font-family: 'Six Caps', sans-serif;
font-weight: 300;
letter-spacing: 0.25em;
}
.menu{
color: #21a179;
padding:0.05% 0.5%;
margin: 0;
background: #242424;
border: 3px solid #21a179;
border-radius:0 0 10px 10px;
position: fixed;
left: -20px;
top: 25%;
transform: translateY(-50%);
transform: rotate(-90deg);
pointer-events: none;
z-index: 10;
}
nav{
height: 100vh;
width: 280px;
background-color: transparent;
position: fixed;
left: 0;
top: 0;
transform: translateX(-90%);
transition: 0.3s;
z-index: 11;
}
nav ul{
position: absolute;
top: 50%;
transform: translateY(-50%);
list-style: none;
margin-left: 40px;
}
nav ul li{
margin: 15px 0;
padding: 10px 0;
}
nav a{
color: #21a179;
font-weight: 100%;
font-size: 120%;
text-decoration: none;
transition: 0.1s;
}
nav a:hover{
text-decoration: none;
background: #333;
padding-left:10px;
color: #82ff9e;
}
nav:hover{
background-color: #242424;
transform: translateX(0);
}
有什么东西丢失了吗？我尝试添加一些媒体查询，但它没有解决问题
这个CSS代码涉及悬停。触摸屏上没有徘徊......