利用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 相关文章推荐
jQuery使用手册之二 DOM操作
Mar 24 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
无刷新上传文件并返回自定义值
Jun 11 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
微信小程序实现多选功能
Nov 04 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 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 Mssql操作简单封装支持存储过程
2009/12/11 PHP
纯php生成随机密码
2015/10/30 PHP
php中namespace及use用法分析
2016/12/06 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
详解Python3中ceil()函数用法
2019/02/19 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
总经理的岗位职责
2014/02/23 职场文书
《颐和园》教学反思
2014/02/26 职场文书
生产操作工岗位职责
2014/09/16 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
2014年变电站工作总结
2014/12/19 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
python实现双链表
2022/05/25 Python