Question

情况和问题描述

我目前正在根据Google Developer's PageSpeed Insights Tool提供的提示进行网页的移动优化工作，并且我收到很多关于点击目标彼此太接近的警告。问题是：当PageSpeed 一个时，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（简化）：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

问题

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

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

Answer 1

您围绕两个内联元素包装锚元素。如果将它包装在块级元素（如div）周围，则会有一个块级链接而不是多个内联链接。您还可以在高度和宽度方面调整点击目标的大小，以优化Google的点击目标。

Answer 2

魔鬼在细节中，我们似乎没有暗示为什么PageSpeed将<span>中的各个<a>元素解释为点按目标，因为它已经提到了可能有事件处理程序绑定到触发此警告的元素。

根据该免责声明，我将假设PageSpeed确实警告过您关于像

这样的结构

<a href=#>
  <span class=glyph>..</span>&nbsp;<span>..</span>
</a>

所以我会专注于从中删除元素，以防止症状（我真的不相信PageSpeed唠叨关于锚内的内联标记）。

＆＃13;

.glyph::before {
  content: "x";
  margin: 0 1ex 0 0; /* hated to see &nbsp; again */
}

.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;
  /* Tip: Use shorthand to define, full property to override */
  /*
  border-color: #000;
  border-style: solid;
  border-width: 1px;
  */
  border: 1px solid #000;
  border-radius: 3px;

  margin: 1px 2px;
  padding: 5px 8px;

  /* prevent lines from wrapping, removes the need for &nbsp; */
  white-space: nowrap; 
}

＆＃13;

<a href="//some.where" class="glyph">
  <span class="badge">21</span>
</a>

＆＃13;

这样做是为了移动某些逻辑，减少样式所需的元素数量。（在评论中添加了一些提示）

这应删除.. is close to 1 other tap targets警告，因为这些元素只是被移除。

如何将多个点击目标加入一个以修复PageSpeed＆＃34;点击目标太近＆＃34; - 警告？

情况和问题描述

实施例

问题

2 个答案: