利用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 相关文章推荐
JS 容错处理代码, 屏蔽错误信息
Mar 09 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
使用jQuery重置(reset)表单的方法
May 05 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
js编写当天简单日历效果【实现代码】
May 03 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 Javascript
详解Node.js如何处理ES6模块
May 15 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
php 执行系统命令的方法
2009/07/07 PHP
php foreach 参数强制类型转换的问题
2010/12/10 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
php实现文件下载实例分享
2014/06/02 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
js闭包用法实例详解
2016/12/13 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
python求最大值最小值方法总结
2019/06/25 Python
如何基于线程池提升request模块效率
2020/04/18 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
优秀社区干部事迹材料
2014/02/03 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
工地材料员岗位职责
2015/04/11 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书