Question

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

更具体地说，如果用户正在运行Windows或Mac系统，则应出现“桌面按钮”;如果用户在移动设备上，则应显示“移动按钮”。

虽然我已经在许多其他网站上看到类似的实现，但我还没有找到任何关于如何实现这种行为的指南。

由于

Answer 1

查看http://lessframework.com/如何在css中使用@media。那么你要检查的不是操作系统或设备，而是浏览器中窗口的宽度。如果它是桌面，则显示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，它也会隐藏按钮。

Answer 2

我通常使用bootstrap来为我服务。你所要做的就是去使用.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">

干杯!!!

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

2 个答案: