我想知道是否可以根据用户在 Javascript中的操作系统类型(无论是移动操作系统还是桌面操作系统)在我的网站上显示不同的按钮。
更具体地说,如果用户运行的是 Windows 或 Mac 系统,那么应该会出现一个“桌面按钮”;如果用户在移动设备上,则应出现“移动按钮”。
尽管我在许多其他网站上看到了类似的实现,但我还没有找到任何关于如何实现这种行为的指南。
谢谢
我想知道是否可以根据用户在 Javascript中的操作系统类型(无论是移动操作系统还是桌面操作系统)在我的网站上显示不同的按钮。
更具体地说,如果用户运行的是 Windows 或 Mac 系统,那么应该会出现一个“桌面按钮”;如果用户在移动设备上,则应出现“移动按钮”。
尽管我在许多其他网站上看到了类似的实现,但我还没有找到任何关于如何实现这种行为的指南。
谢谢
Check out http://lessframework.com/ on how to work with @media in css. Then what you would check for is not the OS or device, but the width of the window in the browser. If it's a desktop, display div a (with button a) and hide any other. If it's a mobile device (smaller screen resolution), then, hide div a, and display div b (with button b).
Example in css:
#a {display:block;}
#b {display:none;}
@media only screen and (min-width: 480px) and (max-width: 767px) {
#a {display:none;}
#b {display:block;}
}
Note however, that the div a and div b both have a button in them... So if you hide the div, it'll hide the button as well.
我通常使用引导程序来为我服务。您所要做的就是使用 .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">
干杯!!!