利用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代码
Apr 02 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
js中作用域的实例解析
Mar 16 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
node 命令方式启动修改端口的方法
May 12 Javascript
解决修复npm安装全局模块权限的问题
May 17 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
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
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
详解如何修改python中字典的键和值
2020/09/29 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
机械专业应届生求职信
2013/12/12 职场文书
党员个人整改措施
2014/10/24 职场文书
婚姻出轨保证书
2015/05/08 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
python实现层次聚类的方法
2021/11/01 Python