利用Javascript判断操作系统的类型实现不同操作系统下的兼容性


Posted in Javascript onJanuary 29, 2013

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

<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操作系统进行更为精确的识别,可以继续使用下边的代码操作:
<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特性的检测:
<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文字高度,这样就使得文字高度随着文字大小动态改变,不会造成文字截断现象的发生了。
Javascript 相关文章推荐
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
深入理解javascript prototype的相关知识
Sep 19 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 Javascript
node中使用shell脚本的方法步骤
Mar 23 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 #Javascript
JavaScript起点(严格模式深度了解)
Jan 28 #Javascript
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 #Javascript
JavaScript转换农历类实现及调用方法
Jan 27 #Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 #Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 #Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 #Javascript
You might like
Laravel框架表单验证详解
2014/09/04 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
js css样式操作代码(批量操作)
2009/10/09 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
详解Python中time()方法的使用的教程
2015/05/22 Python
详解python3实现的web端json通信协议
2016/12/29 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
一行python实现树形结构的方法
2019/08/09 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
2019/09/11 HTML / CSS
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
Java里面有没有全局变量?为什么?
2015/02/06 面试题
实习生自我评价
2014/01/18 职场文书
高中生自我评语大全
2014/01/19 职场文书
社区端午节活动方案
2014/01/28 职场文书
卖房协议书
2014/04/11 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书
python not运算符的实例用法
2021/06/30 Python