两种方式实现html根据设备展示不同内容

实现一个HTML页面在PC和移动设备上展示不同的内容，可以采用以下两种方式：

1. 媒体查询（Media Queries）

可以通过 CSS3 的媒体查询来实现不同设备上的不同样式，CSS3 的 Media Queries 功能可以根据设备的属性，例如屏幕宽度，设备方向等等来应用不同的样式。如下是一个简单的例子：

/* 默认样式 */
.content {
  font-size: 16px;
}

/* 移动设备样式 */
@media only screen and (max-width: 600px) {
  .content {
    font-size: 12px;
  }
}

在上面的代码中，当浏览器窗口宽度小于等于 600px 时，.content 元素的字体大小将被设置为 12px。这样就可以针对不同设备设置不同的样式。

2. JavaScript 检测

通过使用 JavaScript，可以检测用户使用的设备类型，然后根据不同设备类型来加载不同的 HTML 内容，实现不同设备上的不同内容的展示。可以使用如下的代码：

if(navigator.userAgent.match(/Mobile/i)) {
  // 移动设备
  document.write("这是移动设备。");
} else {
  // PC 设备
  document.write("这是 PC 设备。");
}

在上面的代码中，判断用户使用的是移动设备还是 PC 设备，可以根据不同平台加载不同内容。需要注意的是，这种方式有一定的局限性，因为在某些情况下，用户可能随时切换设备，这种方式就不能保证始终正确。