2016-05-22 8 views
0

Ich benutze Zurb Foundation 5.5.3 mit Vanille CSS.Tippen Ziele sind zu klein - Google Pagespeed Feedback

Ich erhalte das Google Page Speed ​​Feedback meiner tap Ziele zu klein sind, in verschiedenen Bereichen pro https://www.dropbox.com/s/v42ujkgiof8kd3r/Screenshot%202016-05-22%2007.55.45.png?dl=0

Ich weiß nicht, was ich zum Beispiel in der Fußzeile tun soll die Größe der erhöhen Ziel tippen ... könnte jemand einen Blick darauf werfen?

<footer class="footer"> 
    <div class="row"> 
     <div class="small-12 medium-6 large-5 columns"> 
      <p class="logo-footer"><img src="/img/favicon-32x32.png" alt="iProbe logo" width="32" height="32"/><br>iProbe</p> 
      <p class="footer-links"> 
       <a href="/our-company/about-us">Company</a> 
       <a href="/learn/">Knowledge Center</a> 
       <a href="/our-work/">Our Work</a> 
       <a href="/our-company/jobs">Jobs</a> 
       <a href="/our-company/contact-us">Contact</a> 
      </p> 
      <p class="copywrite">Copyright &copy; 2002-2016 iProbe Multilingual Solutions, Inc. All Rights Reserved.</p> 
     </div> 
     <div class="small-12 medium-6 large-4 columns"> 
      <address> 
       <ul class="contact"> 
        <li><p><i class="fi-marker"></i><a class="ul-white" href="https://www.google.com/maps/place/iProbe+Multilingual+Solutions,+Inc./@40.7436927,-73.9857017,17z/data=!3m1!4b1!4m5!3m4!1s0x89c25978e10ef08d:0xac0cc841c886ce37!8m2!3d40.7436927!4d-73.983513">419 Park Avenue South, Suite 600, <br>New York, NY 10016</a></p></li> 
        <li><p><i class="fi-telephone"></i>+1-212-489-6035</p></li> 
        <li><p class="a-white"><i class="fi-mail"></i><a href="mailto:[email protected]">[email protected]</a></p></li> 
       </ul> 
      </address> 
     </div> 
     <div class="small-12 medium-12 large-3 columns"> 
      <p class="about">See what we're up to.</p> 
      <p class="about subheader">Like us.</p> 
      <ul class="inline-list social"> 
       <li><a href="http://www.facebook.com/iprobe"><i class="fi-social-facebook"></i></a></li> 
       <li><a href="https://twitter.com/iprobe"><i class="fi-social-twitter"></i></a></li> 
       <li><a href="https://www.linkedin.com/company/iprobe"><i class="fi-social-linkedin"></i></a></li> 
      </ul> 
     </div> 
    </div> 
</footer> 

Dies ist die Geige: https://jsfiddle.net/setbon/af7qtbh7/1/

Antwort

1

Es bedeutet, dass auf einem Touch-Gerät 2 oder mehr Anker so nahe ist, dass eine Chance besteht, dass ein Benutzer versehentlich auf einem anderen Anker als das anzapfen könnte er will Oder der Benutzer versucht, auf einen Anker zu tippen, aber stattdessen auf den anderen.

Sie sollten also einen Abstand zwischen den Ankern haben, damit der Benutzer den entsprechenden Anker leicht antippen kann.

Weitere Details https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately

CSS Änderung siehe benötigt:

eine Marge Hinzufügen wird das Problem beheben, ist dies für Footer-Links nur, müssen Sie für alle Links Google vorgeschlagen tun.

.footer .footer-links a { 
    margin: 0 10px 10px 0; 
    display: inline-block; 
} 
+0

Können Sie mir zeigen, was ich in der Geige CSS ändern? –

+0

Ich hatte die Antwort aktualisiert, Sie müssen zu allen Zielen, die Google erwähnt hat, eine Marge hinzufügen. Diese –

+0

ist vor der CSS Änderung: https://www.dropbox.com/s/1srnfqog4ezo6b5/Screenshot%202016-05-22%2010.02.05.png?dl=0 –