日期:2014-05-16 浏览次数:20275 次
?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Screen Width Test</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>