利用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 相关文章推荐
mapper--图片热点区域高亮组件官方站点
Dec 22 Javascript
关于javascript function对象那些迷惑分析
Oct 24 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 26 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上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
用innerhtml提高页面打开速度的方法
2013/08/02 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
学python安装的软件总结
2019/10/12 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
Python用input输入列表的实例代码
2020/02/07 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
大班开学家长寄语
2014/04/04 职场文书
理财计划书
2014/08/14 职场文书
年底个人总结范文
2015/03/10 职场文书
求职推荐信范文
2015/03/27 职场文书
校长一岗双责责任书
2015/05/09 职场文书
Node与Python 双向通信的实现代码
2021/07/16 Javascript
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL