Javascript检测浏览器设备的实现代码

发布时间:2019-08-18编辑:脚本学堂
本文分享一例js代码,用于检测浏览器设备的相关信息,包括浏览器的宽度、高度等信息。有需要的朋友参考下。

本节内容:
一例检测浏览器设备信息的js代码。

例子:
 

复制代码 代码示例:
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Screen Width Test-www.jb200.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>