点击目标太小 - Google pagespeed 反馈

Question

我正在使用带有香草的 Zurb Foundation 5.5.3 CSS。

我收到了 Google 页面速度反馈，我的点击目标在各个区域都太小 https://www.dropbox.com/s/v42ujkgiof8kd3r/Screenshot%202016-05-22%2007.55.45.png?dl=0

我不知道我应该做什么，例如在页脚中增加点按目标的大小...有人可以看一下吗？

<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:info@iprobesolutions.com">info@iprobesolutions.com</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>

这是fiddle：https://jsfiddle.net/setbon/af7qtbh7/1/

Answer 1

这意味着在触摸设备上有 2 个或更多锚点靠得太近，以至于用户有可能不小心点击另一个锚点而不是他想要的锚点或者用户试图点击一个锚点但它没有在另一。

所以你应该有一些间距，即锚点之间的边距，以便用户可以轻松点击相关锚点。

有关详细信息，请参阅 https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately

CSS 需要更改：

添加页边距可以解决这个问题，这仅适用于页脚链接，您需要对建议的所有链接执行 Google。

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

点击目标太小 - Google pagespeed 反馈

Tap targets are too small - Google pagespeed feedback

css

user-experience