Почему этот CSS не работает на любом iPhone - PullRequest
Новая
       7

Почему этот CSS не работает на любом iPhone

0 голосов
/ 26 апреля 2018

Я новичок в веб-программировании и искал несколько кодов для своего собственного веб-сайта. Мне понравилась эта ручка, и я попробовал: 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);
}

Чего-то не хватает? Я попытался добавить несколько медиа-запросов, но это не решило проблему

1 Ответ

0 голосов
/ 26 апреля 2018

Этот код CSS включает в себя зависание. Там нет зависания на сенсорном экране ...

...