Javascript检测浏览器设备的实现代码
发布时间：2015-02-22 编辑：jiaochengji.com
本文分享一例js代码，用于检测浏览器设备的相关信息，包括浏览器的宽度、高度等信息。有需要的朋友参考下。
本节内容：
一例检测浏览器设备信息的js代码。
例子：
复制代码 代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Screen Width Test-www.jiaochengji.com</title>
<style type="text/css">
@media all and (max-device-width: 1024px) {
body {
background-color: yellow;
}
}
</style>
</head>
<body>
<script type="text/javascript">
var agent = navigator.userAgent.toLowerCase();
var scrWidth = screen.width;
var scrHeight = screen.height;
// The document.documentElement dimensions seem to be identical to
// the screen dimensions on all the mobile browsers I've tested so far
var elemWidth = document.documentElement.clientWidth;
var elemHeight = document.documentElement.clientHeight;
// We need to eliminate Symbian, Series 60, Windows Mobile and Blackberry
// browsers for this quick and dirty check. This can be done with the user agent.
var otherBrowser = (agent.indexOf("series60") != -1) || (agent.indexOf("symbian") != -1) || (agent.indexOf("windows ce") != -1) || (agent.indexOf("blackberry") != -1);
// If the screen orientation is defined we are in a modern mobile OS
var mobileOS = typeof orientation != 'undefined' ? true : false;
// If touch events are defined we are in a modern touch screen OS
var touchOS = ('ontouchstart' in document.documentElement) ? true : false;
// iPhone and iPad can be reliably identified with the navigator.platform
// string, which is currently only available on these devices.
var iOS = (navigator.platform.indexOf("iPhone") != -1) ||
(navigator.platform.indexOf("iPad") != -1) ? true : false;
// If the user agent string contains "android" then it's Android. If it
// doesn't but it's not another browser, not an iOS device and we're in
// a mobile and touch OS then we can be 99% certain that it's Android.
var android = (agent.indexOf("android") != -1) || (!iOS && !otherBrowser && touchOS && mobileOS) ? true : false;
document.write("<p><b>Screen width:</b> " + scrWidth +"px<br />" +
"<b>Screen height:</b> " + scrHeight + "px<br />" +
"<b>Document element width:</b> " + elemWidth +"px<br />" +
"<b>Document element height:</b> " + elemHeight + "px<br />" +
"<b>iOS device:</b> "+iOS+"<br />"+
"<b>Mobile OS:</b> "+mobileOS+"<br />"+
"<b>Touch OS:</b> "+touchOS+"<br />"+
"<b>Android device:</b> "+android+"</p>" +
"<p><b>User agent string:</b> "+navigator.userAgent+"</p>"
);
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Screen Width Test-www.jiaochengji.com</title>
<style type="text/css">
@media all and (max-device-width: 1024px) {
body {
background-color: yellow;
}
}
</style>
</head>
<body>
<script type="text/javascript">
var agent = navigator.userAgent.toLowerCase();
var scrWidth = screen.width;
var scrHeight = screen.height;
// The document.documentElement dimensions seem to be identical to
// the screen dimensions on all the mobile browsers I've tested so far
var elemWidth = document.documentElement.clientWidth;
var elemHeight = document.documentElement.clientHeight;
// We need to eliminate Symbian, Series 60, Windows Mobile and Blackberry
// browsers for this quick and dirty check. This can be done with the user agent.
var otherBrowser = (agent.indexOf("series60") != -1) || (agent.indexOf("symbian") != -1) || (agent.indexOf("windows ce") != -1) || (agent.indexOf("blackberry") != -1);
// If the screen orientation is defined we are in a modern mobile OS
var mobileOS = typeof orientation != 'undefined' ? true : false;
// If touch events are defined we are in a modern touch screen OS
var touchOS = ('ontouchstart' in document.documentElement) ? true : false;
// iPhone and iPad can be reliably identified with the navigator.platform
// string, which is currently only available on these devices.
var iOS = (navigator.platform.indexOf("iPhone") != -1) ||
(navigator.platform.indexOf("iPad") != -1) ? true : false;
// If the user agent string contains "android" then it's Android. If it
// doesn't but it's not another browser, not an iOS device and we're in
// a mobile and touch OS then we can be 99% certain that it's Android.
var android = (agent.indexOf("android") != -1) || (!iOS && !otherBrowser && touchOS && mobileOS) ? true : false;
document.write("<p><b>Screen width:</b> " + scrWidth +"px<br />" +
"<b>Screen height:</b> " + scrHeight + "px<br />" +
"<b>Document element width:</b> " + elemWidth +"px<br />" +
"<b>Document element height:</b> " + elemHeight + "px<br />" +
"<b>iOS device:</b> "+iOS+"<br />"+
"<b>Mobile OS:</b> "+mobileOS+"<br />"+
"<b>Touch OS:</b> "+touchOS+"<br />"+
"<b>Android device:</b> "+android+"</p>" +
"<p><b>User agent string:</b> "+navigator.userAgent+"</p>"
);
</script>
</body>
</html>
您可能感兴趣的文章：
javascript 判断浏览器版本的代码
用jQuery实现检测浏览器及版本的脚本代码
检测浏览器版本的js代码
javascript 检测浏览器版本的方法
js进行浏览器特性检测的介绍
IE浏览器调试JavaScript程序代码的例子
js下IE与FF浏览器兼容的函数
JS判断浏览器版本示例
Javascript检测浏览器设备的实现代码
js检测用户浏览器类型的代码
[关闭]