解决WordPress移动端目录Tap target size不小于48px的美观兼容问题

下面是几个兼顾美观和PageSpeed要求的可行方案，不用直接放大按钮视觉尺寸：

• 用CSS伪元素扩展点击区域
  给目标元素添加透明的伪元素，让点击区域达到48px×48px，而原按钮的视觉大小保持不变。示例代码：

  /* 针对移动端的媒体查询 */
  @media (max-width: 768px) {
    .inbox-button {
      position: relative;
      /* 保持原按钮的视觉样式 */
      width: auto;
      height: 32px;
      line-height: 32px;
    }
    .inbox-button::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 48px;
      height: 48px;
      z-index: 1;
      /* 伪元素透明，不影响视觉 */
      opacity: 0;
    }
  }
  

  注意替换.inbox-button为你实际的Inbox按钮选择器，伪元素会覆盖在原按钮上方，扩大点击范围但不改变外观。

• 调整内边距（Padding）而非元素尺寸
  给移动端的按钮增加内边距，让点击区域自然扩展，同时保持按钮文字和视觉边框的大小。示例：

  @media (max-width: 768px) {
    .inbox-button {
      padding: 8px 16px; /* 上下左右增加padding，让点击区域达到48px左右高度 */
      /* 保持原文字大小和边框 */
      font-size: 14px;
      border: 1px solid #ccc;
    }
  }
  

  这种方式会让按钮的点击区域变大，但视觉上只是留白增加，不会显得臃肿，反而可能更符合移动端的交互体验。

• 分离点击区域与视觉元素
  给按钮套一个透明的容器，容器设置为48px的点击区域，按钮本身居中放置在容器内，容器无视觉样式：

  @media (max-width: 768px) {
    .inbox-hit-area {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      background: transparent;
      border: none;
      padding: 0;
    }
    .inbox-button {
      /* 原按钮的视觉样式，比如32px大小 */
      width: 32px;
      height: 32px;
      line-height: 32px;
      background: #eee;
      border-radius: 4px;
    }
  }
  

  这种方式彻底把点击区域和视觉元素分开，完全不影响原按钮的美观度，同时满足PageSpeed的要求。

内容的提问来源于stack exchange，提问作者jonh