我是网络编程的新手，一直在为我自己的网站寻找一些代码笔。我喜欢这支笔并试了一下:https://codepen.io/rex50/pen/gzpvzq
我在元数据中添加了视口(viewport)标签，但它不起作用。它适用于任何其他手机 (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 代码涉及悬停。触摸屏上没有悬停...
关于html - 为什么这个 CSS 不适用于任何 iPhone，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50051549/