如何根据设备类型（电脑/手机等）调整HTML链接的显示样式？

你可以通过CSS的媒体查询检测设备是否支持鼠标悬停，针对性调整按钮样式，避免移动端用户需点击才能看到文字的问题。以下是两种可行方案：

方案1：检测是否支持悬停（推荐） #

使用@media (hover: none)媒体查询，针对不支持悬停的设备（如手机、平板等触摸设备）修改按钮默认状态样式，让文字在初始状态就可见：

<body>
<p>
<a href="link">button</a>
</p>
</body>
<style>
/* 电脑端保留原悬停效果 */
a:link { 
  color: white;
  background-color: white;
  text-decoration: none; 
}
a:visited { text-decoration: none; }
a:hover { 
  color: white;
  background-color: transparent;
  text-decoration: none; 
}
a:active { text-decoration: none; }

/* 针对不支持悬停的设备（移动端）修改默认样式 */
@media (hover: none) {
  a:link {
    background-color: transparent;
    /* 若需要可调整文字颜色，比如改成黑色 */
    /* color: black; */
  }
}

p {
  font-size: 30px;
  font-family: Andale Mono, monospace;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>

方案2：检测触摸设备的指针类型 #

使用@media (pointer: coarse)媒体查询，针对触摸设备（指针类型为粗粒度）调整样式，效果和方案1一致：

@media (pointer: coarse) {
  a:link {
    background-color: transparent;
  }
}

这两种方案无需额外JavaScript，纯CSS就能实现：移动端用户打开页面直接看到按钮文字，同时保留电脑端的悬停交互效果。

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