根据移动/桌面操作系统在网站上显示不同的按钮/下载链接

Display different button/download link on website depending on mobile/desktop OS

本文关键字：按钮 下载 显示 链接 移动 桌面操作系统 网站      更新时间：2023-09-26

我想知道是否可以在我的网站上显示不同的按钮，具体取决于用户在 Javascript 中的操作系统类型（无论是移动操作系统还是桌面操作系统）。

更具体地说，如果用户运行的是Windows或Mac系统，那么应该会出现一个"桌面按钮";如果用户在移动设备上，应该出现一个"移动按钮"。

我无法找到有关如何实现这种行为的任何指南，尽管我在许多其他网站上看到了类似的实现。

谢谢

我通常使用引导程序来达到这个目的。您所要做的就是使用 .visible-phone 或 .visible-desktop 或 .hidden-phone 类。

相应地隐藏您想要的元素并显示您想要的内容。

**不要忘记把这个 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

干杯！！！

查看有关如何

在 CSS 中使用@media http://lessframework.com/。然后，您要检查的不是操作系统或设备，而是浏览器中窗口的宽度。如果是桌面，则显示div a（带有按钮 a）并隐藏任何其他内容。如果是移动设备（屏幕分辨率较小），则隐藏div a，并显示div b（使用按钮 b）。

CSS 中的示例：

#a {display:block;}
#b {display:none;}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  #a {display:none;}
  #b {display:block;}
}

但是请注意，div a 和div b 都有一个按钮......因此，如果您隐藏div，它也会隐藏按钮。

相关文章：