html - 如何将多个点击目标合并为一个以修复 PageSpeed "tap targets too close"- 警告？

Question

现状及问题描述

我目前正在根据 Google Developer's PageSpeed Insights Tool 给出的提示对网页进行移动优化我收到很多关于点击目标彼此太近的警告。问题是:PageSpeed 看到多个点击目标，而只有一个预期。

例子

• PageSpeed 输出(简化):

  The tap target <span class="glyphicon"> is close to 1 other tap targets.
  The tap target <span class="badge"> is close to 1 other tap targets.
  

• 相应的 CSS/HTML(简体):

  .glyphicon::before {
      content: "x"; /* substitute for same size shopping cart symbol of custom font*/
  }
  
  .badge {
    background-color: #999;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    min-width: 10px;
    padding: 3px 7px;
    text-align: center;
    vertical-align: baseline;
  }
  
  a {
    text-decoration: none;
    border-color: #000;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    margin: 1px 2px;
    padding: 5px 8px;
  }

  <a href="//some.where">
    <span class="glyphicon"></span>&nbsp;<span class="badge">21</span>
  </a>

问题

您可以很容易地看出，其目的是让一个点击目标成为链接，由两个(或在类似情况下更多)HTML 元素组成。

我该怎么做才能让 Google 的 PageSpeed 只识别点击目标的父链接而忽略它的子链接？

Answer 1

您将 anchor 元素包裹在两个内联元素周围。如果将它包裹在 block 级元素(如 div)周围，您将拥有一个 block 级链接而不是多个内联链接。您还可以根据高度和宽度调整点击目标的大小，从而为 Google 优化点击目标。