Question

我用Tool Lighthouse测试我的网站，关于SEO这么说，

我的Nav如何；

<nav id="navs">
 <ul>
  <li><a href="/es/about_us.php">Nosotros</a></li>
  <li><a href="/es/contact.php">Contactar</a></li>
 </ul>
 <ul>
   <li><a href="/es/index.php">Home</a></li>

   <li class="dropdown">
    <a href="#" class="dropbtn">Linux OS</a>
    <div class="dropdown-content">
    <a href="/es/linux_mint.php">Linux Mint</a>
    <a href="/es/ubuntu.php">Ubuntu</a>
    <a href="/es/debian.php">Debian</a>
    <a href="/es/android.php">Android</a>
   </div>
  </li>
  <li class="new-link">
   <a href="#" class="neuen">News & Mas</a>
   <div class="new-content">
      <a href="#">News</a>
      <a href="#">Geek</a>
   </div>
  </li>
  <li><a href="#">Libros</a></li>
  <li class="languag">
    <a href="#" class="language">&#127757; Ingles</a>
    <div class="languages">
     <a href="https://linuxusers.net">Ingles</a>
     <a href="https://linuxusers.net/de/index.php">Aleman</a>
    </div>
   </li> 
 </ul>
</nav>

我的 nav 代码在CSS上如何使用

nav {background-color: #d2f5c4; display: flex; }

nav a{
  color: black;
  text-decoration: none;
  display: inline;
  padding: 10px 10px 10px ;
  font-size: 20px;
  font-family:  Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;

}

nav ul {list-style-type: none;  flex: 1 0 auto;}

nav li { display: inline-block;}

nav ul:nth-of-type(2) {
  text-align: right;          
  padding-right:120px;

}


.dropbtn  {padding: 9px 25px 10px 26px;}



   /* Geben an Link1, link2, link3 ; Farbe , Padding, .... */


.dropdown { 
   position: relative; 
}


li a:hover, .dropdown:hover .dropbtn {
  background-color: #f1ebeb;


}

.dropdown-content {
  display: none; 
  font-size: 13px;
  position: absolute; /* die stellung folgt der Erste Link(li) */
  background-color: #f1f1f1 ;
  min-width: 15px; /* macht größer die Inneren Links */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Bau ein Schatte und geben an dem Schatten Farbe  */
  z-index: 1;    /*  Zeigen die Ordnung wie die Links gezeigt werden... */

 }



.dropdown-content a {
  color: black;
  padding: 12px 27px 15px 8px;
  text-decoration: none;               
  display: block;
  font-size: 15px;
  text-align: left;
  font-weight: bold;

 }

 .dropdown-content a:hover {
   background-color: #9f9e9e;
 }
  /* Offnen die Innere Links */

 .dropdown:hover .dropdown-content {
   display: block;
   top: 30px; 
 }

       /*  New link to Nav   */


 li a:hover, .new-link:hover .neuen{
     background-color: #f1ebeb;   
 }

 .new-link:hover .new-content {display: block;}

 .new-link {position: relative;}   

 .new-content a {
    color: black;
    padding: 12px 48px;
    text-decoration: none;               
    display: block;
    text-align: right;
    font-size: 16px;
    font-weight: bold;
  }
  .new-content {
    font-size: 13px;
    position: absolute; /* die stellung folgt der Erste Link(li) */
    background-color: #f1f1f1 ;
    min-width: 10px; /* macht größer die Inneren Links */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Bau ein Schatte und geben an dem Schatten Farbe  */
    z-index: 1;   

  }
  .new-content {
    color: black;
    text-decoration: none;       
  }
  .new-content a:hover { background-color: #9f9e9e; }

  .new-link:hover .new-content { top: 30px}

我要测试的网站https://linuxusers.net/es/index.php?utm_expid=197730067-0.cq0szEyGRfmr1rjg-49UtA.0&utm_referrer=https%3A%2F%2Flinuxusers.net%2Findex.php

我的问题是我不知道如何实现它，就像报告中所说的那样，可以请任何人告诉我该怎么做，谢谢！

Answer 1

点击目标的大小不合适：这意味着您具有点击目标的大小。

点击目标是用户经常点击的互动元素，例如按钮或链接。适当大小的点击目标可使页面更适合移动设备且更易于访问。

如果您的点击目标尺寸较小，那么它将不适合移动设备使用。因此，用户必须缩放以读取内容。因此请增加失败的点击目标的尺寸。

如果您的标签目标失败，那就是锚元素只是增加锚元素的大小

了解更多访问次数：https://developers.google.com/web/tools/lighthouse/audits/tap-targets

灯塔报告；目标大小不适当

1 个答案: