H5如何设置aria-label在PC端和手机端不同的值

在H5（HTML5）开发中，`aria-label` 属性用于为页面上的元素提供一个可访问的名称，这对于屏幕阅读器等辅助技术非常重要。如果需要为PC端和手机端设置不同的 `aria-label` 值，可以使用媒体查询（Media Queries）来根据不同的屏幕尺寸应用不同的样式和属性。

在实际操作中，`aria-label` 是一个属性而非样式，它没有直接的方法通过CSS媒体查询来改变。但可以通过JavaScript来根据设备类型动态设置 `aria-label` 的值。以下是一个基本的实现方法：

1. 使用JavaScript检测用户设备类型。
2. 根据检测结果，动态地为元素设置相应的 `aria-label` 属性值。

示例代码如下：

// 检测设备类型
function detectDeviceType() {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? 'mobile' : 'desktop';
}

// 根据设备类型设置 aria-label
function setAriaLabel(element, desktopLabel, mobileLabel) {
  var deviceType = detectDeviceType();
  var label = deviceType === 'mobile' ? mobileLabel : desktopLabel;
  element.setAttribute('aria-label', label);
}

// 使用示例
var myElement = document.getElementById('myElement');
setAriaLabel(myElement, 'PC端描述', '移动端描述');

在上面的代码中，`detectDeviceType` 函数用于判断用户的设备是手机端还是PC端，然后根据返回的设备类型，`setAriaLabel` 函数为指定的元素设置相应的 `aria-label` 值。

请注意，这种方法需要在页面加载时或响应窗口大小变化时执行，以确保元素的 `aria-label` 能够根据不同的设备环境得到正确的设置。