前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >利用Javascript判断操作系统的类型

利用Javascript判断操作系统的类型

作者头像
deepcc
发布2018-05-16 14:43:05
1.2K0
发布2018-05-16 14:43:05
举报
文章被收录于专栏:deepcc

在通过Javascript实现客户端和服务端的交互时,有时候需要对操作系统进行判断,以便实现不同操作系统下的兼容性,比如:我们有一个网站, 在Windows XP下浏览效果良好,但是到了Ubuntu下,由于许多特性不同,会造成在浏览上的细微差异,甚至会影响到良好的用户体验。这个时候我们就需要利用 Javascript对操作系统的类型以及某些特性进行判断,分而治之,从而实现网站在跨平台浏览时候保持良好的用户体验。

下边的代码实现对Windows、Mac、Linux、Unix擦作系统的判断:

代码语言:javascript
复制
<script type="text/javascript" language="JavaScript">
<!--
function check_os() {
    windows = (navigator.userAgent.indexOf("Windows",0) != -1)?1:0;
    mac = (navigator.userAgent.indexOf("mac",0) != -1)?1:0;
    linux = (navigator.userAgent.indexOf("Linux",0) != -1)?1:0;
    unix = (navigator.userAgent.indexOf("X11",0) != -1)?1:0;
 
    if (windows) os_type = "MS Windows";
    else if (mac) os_type = "Apple mac";
    else if (linux) os_type = "Lunix";
    else if (unix) os_type = "Unix";
 
    return os_type;
}
//-->
</script>

如果我们需要对Windows操作系统进行更为精确的识别,可以继续使用下边的代码操作:

代码语言:javascript
复制
<script type="text/javascript" language="JavaScript">
<!--
    var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows"); // 确保为windows系统
    var isWin98 = isWin2000 = isWinXP = false;
    var sUserAgent = navigator.userAgent;
    if(isWin) {
        isWin98=sUserAgent.indexOf("Win98") > -1 || sUserAgent.indexOf("Windows 98") > -1; // win98
        isWin2000=sUserAgent.indexOf("Windows NT 5.0") > -1 || sUserAgent.indexOf("Windows 2000") > -1; //win2000
        isWinXP=sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows Xp") > -1; //winxp
 
        isWin98 && alert("window 98");
        isWin2000 && alert("windows 2000");
        isWinXP && alert("windows XP");
    }
//-->
</script>

下边的代码是为了实现对浏览器是否支持XML特性的检测:

代码语言:javascript
复制
<script type="text/javascript" language="JavaScript">
    var SupportXml=false;
    var xmldom;
    if(window.ActiveXObject) {
        try {
            xmldom=new ActiveXObject("Microsoft.XMLDOM");
            SupportXml=(xmldom.loadXML(" <ok/>"));
        } catch(e) {} 
    } 
    else if(document.implementation && document.implementation.createDocument) {
        SupportXml=true;
    } 
    alert('XML状态为:'+SupportXml);
</script>

PS:为了更好地避免不同浏览器,不同操作系统因为默认文字不同而对页面布局造成影响,应尽量避免CSS中使用固定行高(height:12px;)对 文字高度进行限定,应该尽量使用height:auto,如果迫不得已必须限定文字高度(比如只显示一行),则应使用em代替px(例如 height:1.1em;),1em=1文字高度,这样就使得文字高度随着文字大小动态改变,不会造成文字截断现象的发生了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2013-01-29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档