利用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 相关文章推荐
javascript使用正则表达式检测IP地址
Dec 03 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
js去除浏览器默认底图的方法
Jun 08 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 Javascript
React实现动效弹窗组件
Jun 21 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
基于文本的搜索
2006/10/09 PHP
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
Python实现抓取网页并且解析的实例
2014/09/20 Python
Python网站验证码识别
2016/01/25 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
数据库连接池的工作原理
2012/09/26 面试题
linux面试题参考答案(8)
2016/04/19 面试题
电子商务专业实习生自我鉴定
2013/09/24 职场文书
法学毕业生自荐信
2013/11/13 职场文书
两年的个人工作自我评价
2014/01/10 职场文书
阳光体育活动方案
2014/02/16 职场文书
《夜晚的实验》教学反思
2014/02/19 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
社会发展项目建议书
2014/08/25 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
党员年度个人总结
2015/02/14 职场文书
音乐会主持人开场白
2015/05/28 职场文书