如何从 Javascript 中检测浏览器操作系统？答案

【问题标题】：How can I detect the Browser OS from Javascript?如何从 Javascript 中检测浏览器操作系统？
【发布时间】：2018-03-19 04:47:27
【问题描述】：

我对javascript一无所知，对编程也不太了解，但我想创建一个页面来检查用户的操作系统，如果他们使用的是移动操作系统（iphone、android等），请转发他们到移动网站，如果他们使用电脑，将他们转发到普通网站。这是我制作的页面：

 <head> 
<title>OS Check | website.web.org</title> 

<SCRIPT LANGUAGE = "javaScript"> 

if (navigator.appVersion.indexOf("Win")!=-1) && (navigator.appVersion.indexOf("Mac")!=-1) && (navigator.appVersion.indexOf("X11")!=-1) && (navigator.appVersion.indexOf("Linux")!=-1) location.href= "http://website.web.org/mobile/index.html"

else location.href = "http://website.web.org/Home.html"

</SCRIPT> 
</head>

基本上，它的意思是检查所有主要的计算机操作系统，如果不是其中之一，则将用户发送到移动网页，但如果是其中之一，则将其发送到计算机站点.

谁能告诉我这个页面/脚本中的错误/问题是什么？

谢谢，卢克

【问题讨论】：

看看 CSS 媒体类型。单个 HTML 页面，不同的样式取决于设备类型。
在@BalusC 的评论中，我会向您指出this answer，它提供有关媒体查询的一些信息，以及指向A List Apart article on the same 的链接。

标签： javascript html

【解决方案1】：

这个脚本有什么问题？

是的，几乎所有东西。

从 if 语句中缺少的括号，到老式的 language 属性，到可能破坏导航的 JavaScript 重定向，再到基于粗略的用户代理嗅探的重定向的整个想法。

对于 Windows Mobile（包含“Windows CE”）、Windows Phone、iPhone/iPad（包含字符串“like Mac OS X”）和 Android 设备（包含“Linux”），您的策略将失败。这是对主要移动操作系统失败的很好的覆盖，更不用说可能不包含任何这些令牌的桌面浏览器了。

您可以通过嗅探您想要检测的特定情况来改善这一点。有关现有内容的概述，请参阅 this list。

当该类别涵盖从几乎没有互联网功能的功能手机到大屏幕平板电脑的所有内容时，将所有“移动”设备视为相同是不太有意义的。现代移动浏览器非常有能力呈现普通的 HTML 页面，特别是如果您通过使用流动布局和手持式样式表来减少必要的内容宽度来鼓励可访问性。

【讨论】：

更不用说相对很多的移动浏览器都禁用了JS。
确实如此。至少，纯链接应该包含在<body> 中。如果您必须使用单独的接口和嗅探（JS 或其他），您肯定需要一个手动方法/链接让用户手动选择他们的接口，因为任何嗅探技术都会在很大一部分时间里失败.
...或两者兼有：<a href="http://microsoft.com/" onclick="showFancyPopup(); return false;">Get IE!</a>

【解决方案2】：

其他的cmets都是有效的，但我认为你的问题的根源是这样的：

if (navigator.appVersion.indexOf("Win")!=-1) && (navigator.appVersion.indexOf("Mac")!=-1) && (navigator.appVersion.indexOf("X11")!=-1) && (navigator.appVersion.indexOf("Linux")!=-1)

当重新格式化时

if (navigator.appVersion.indexOf("Win")!=-1)
    && (navigator.appVersion.indexOf("Mac")!=-1)
    && (navigator.appVersion.indexOf("X11")!=-1)
    && (navigator.appVersion.indexOf("Linux")!=-1)

相当于

if (isWindows
    && isMac
    && isX11
    && isLinux)

（因为 indexOf("foo")!=-1 的意思是“找到 foo”）。

你能看到这里的逻辑错误吗？

这就是为什么您应该遵循其他答案的建议：格式化您的代码以使其可读，并（在可能的情况下）使用现有库。合理使用 CSS 也是您的朋友。

【讨论】：

【解决方案3】：

问题是你的括号是错误的。试试这个：

if ( navigator.appVersion.indexOf("Win")!=-1 
     && navigator.appVersion.indexOf("Mac")!=-1 
     && navigator.appVersion.indexOf("X11")!=-1 
     && navigator.appVersion.indexOf("Linux")!=-1 ){
       document.location.href= "http://website.web.org/mobile/index.html";
}
else{ 
       document.location.href = "http://website.web.org/Home.html"
}

【讨论】：

【解决方案4】：

我可能有点晚了，但这里是：

我创建移动网站的主要原因是为了兼容不同屏幕尺寸的设备。使用 JavaScript 非常简单，可以根据用户的屏幕大小将用户重定向到不同的链接，只需将其添加到您的 index.html 中 - Apache 男孩会讨厌，所以我最好警告您这不是“最有效”的方式，但是这对我的目的来说已经足够了。

<html>
<head>
<meta http-equiv="refresh" content="0;document.location" />
</head>
<body>

<script language="javascript" type="text/javascript">// <![CDATA[
if (screen.width <= 699) {
document.location = "LINK TO YOUR MOBILE SITE";
}

else{ 
       document.location.href = "LINK TO YOUR DESKTOP SITE"
}
// ]]></script>
</body>

</html>

编码愉快！

【讨论】：

【解决方案5】：

不要在客户端使用这些重定向，我建议您在此处使用脚本： http://detectmobilebrowser.com/

【讨论】：

是的，在此期间，开始在此处存储您的密码/用户数据库：xyz-pass-store@gmail.com
抱歉，这是怎么回事？

【解决方案6】：

这将向您展示如何使用 JavaScript 进行浏览器检测，这并不难。它实际上不会告诉您是哪个操作系统，但由于它会知道它是手机上的浏览器还是计算机上的浏览器，因此它对于引导到您想要的移动网站很有用。

http://www.javascriptkit.com/javatutors/navigator.shtml

【讨论】：

【解决方案7】：

不再推荐此解决方案！我会使用“浏览器功能检测”，它会检测浏览器是否支持某些功能。如果没有，则将它们重定向到网站的兼容版本。从长远来看，它更安全，因为当浏览器更新以包含新功能时，它将允许使用网站的最佳版本。

https://developer.mozilla.org/en/Browser_Feature_Detection

【讨论】：