javascript获取浏览器视口尺寸代码实例
分类:实例代码
本章节介绍一下如何利用javascript获取浏览器视口尺寸。
关于视口可以参阅什么是浏览器视口介绍一章节。
代码实例:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> * { margin:0px; padding:0px; } body { background:#ccc; } #show { width:100px; height:50px; background:red; position:fixed; top:10px; left:10px; } </style> <script type="text/javascript"> function getViewportSize(w){ //使用指定窗口,如果不带参数则使用当前窗口 w = w || window; if(w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight }; var d = w.document; //标准模式 if(document.compatMode == "CSS1Compat") return { w: d.documentElement.clientWidth,h: d.cocumentElement.clientHeight }; //怪异模式 return { w: d.body.clientWidth, h: d.body.clientHeight } } window.onresize = function () { var size = getViewportSize(); show.innerHTML = size.w + "<br/>" + size.h } </script> </head> <body> <div id="show"></div> </body> </html>
调整一下窗口的大小即可查看代码的功能,代码比较简单更多内容可以参阅相关阅读。
相关阅读:
(1).innerWidth可以参阅window.innerWidth一章节。
(2).clientWidth可以参阅clientWidth一章节。
(4).onresize事件可以参阅javascript resize事件一章节。
javascript获取浏览器视口尺寸代码实例,这样的场景在实际项目中还是用的比较多的,关于javascript获取浏览器视口尺寸代码实例就介绍到这了。
javascript获取浏览器视口尺寸代码实例属于前端实例代码,有关更多实例代码大家可以查看。