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

Question

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

但是，我们也有移动用户。在移动设备上，该按钮毫无意义:移动浏览器(据我所知)甚至没有打印功能。

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

Answer 1

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

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

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