为什么这个 CSS 不适用于任何 iPhone

Question

我是网络编程的新手，一直在为我自己的网站寻找一些代码笔。我喜欢这支笔并试了一下：https://codepen.io/rex50/pen/gzpvzq

我在元数据中添加了视口标签，但它不起作用。它适用于任何其他手机 phone (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);
}

是不是少了什么？我尝试添加一些媒体查询，但没有解决问题

Answer 1

此 CSS 代码涉及悬停。触摸屏上没有悬停...

为什么这个 CSS 不适用于任何 iPhone

Why is this CSS not working on any iPhone

html

css

css-selectors

codepen