可以连接打印机的设备的媒体查询

Posted 2023-03-06

【中文标题】可以连接打印机的设备的媒体查询

【英文标题】：Media query for device that could have a printer attached

【发布时间】：2019-08-08 10:15:32

【问题描述】：

我正在构建一个具有“导出”按钮的站点，该按钮会稍微重新排列页面，然后启动“打印”对话框。它允许桌面用户打印或将页面保存为 PDF。

不过，我们也有移动用户。在移动设备上，该按钮毫无意义：移动浏览器（据我所知）甚至没有打印功能。

如何在移动设备上使用媒体查询（或类似查询）隐藏按钮？最安全的选择似乎是检测操作系统，如果是 android、ios 或类似操作系统，则将其隐藏？

【问题讨论】：

您可以通过用户代理查看，***.com/questions/25393865/…

【参考方案1】：

只要使用这个媒体查询按钮就会在 767px 后隐藏 您还可以根据需要更改视口

@media screen and (max-width:767px)
#print-my-data
display:none;

<button id="print-my-data">Print</button>

【讨论】：

感谢您提供帮助，但我认为这不是正确的方法。如果由于某种原因用户在桌面上的浏览器窗口非常小，则导出按钮应该仍然存在。