CSS/HTML-在手机上隐藏图像并使用替代文本

我目前有一个页面，它使用PHP从SQL数据库生成一个表，包括一个包含图像的列。由于我们现在必须在移动平台上工作，我正在寻找一种隐藏图像的方法。我目前在

antisscreen.css

文件上使用

display:none

，但由于图像是链接，因此它不会显示链接

为清晰起见，当图像位于PC浏览器上时，显示如下：

<td>
  <a href="link to image source:>
    <img  height=80 alt='Text I want to display' src="link to image source" />
  </a>
</td>

当在手机上时，图像、链接和文本将使用

display:none

方法隐藏

---

那么你建议我如何解决这个问题呢？

我可能会这样做：

<td>
  <a href="link to image source:>
    <img  height=80 alt='Text I want to display' src="link to image source" />
    <span class="mobileonly" src="link to image source">Text I want to display</span>
  </a>
</td>

---

然后在主样式表上设置

span.mobileonly{display:none；}

，在

antisscreen.css中设置
span.mobileonly{display:inline；}
。优点是移动链接也很容易设置样式。
另一个适用于特定像素数下所有屏幕大小的选项是使用媒体查询，基本上与上述查询类似，但优点是它适用于小于定义像素数的任何屏幕大小

    /* Media Query for mobile */

    @media screen and (max-width: 480px) {  

    /* This resizes tables and images to be 100% wide with a proportionate width */

    /* Hide stuff on mobiles */
    table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;}

    /* Additional Media Query for tablets */

    @media screen and (min-width: 480px) and (max-width: 1024px) {

    /* Hide stuff on tablets */
    table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;}

这应该包括移动设备和平板设备

代码由.net电子邮件教程提供。我只剥去了你不需要的部分

用法：

<img class="emailnomob" height=80 alt="Text I want to display" src="link to image source" />


您如何确定设备是移动设备？用户代理嗅探？媒体查询？您可以控制html的输出吗？我正在使用
max width
元素进行媒体查询。