javascript獲取瀏覽器視口尺寸程式碼例項
本章節介紹一下如何利用javascript獲取瀏覽器視口尺寸。
關於視口可以參閱什麼是瀏覽器視口介紹一章節。
程式碼例項:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <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事件一章節。
相關文章
- js獲取瀏覽器視窗尺寸程式碼例項JS瀏覽器
- javascript獲取瀏覽器視窗尺寸程式碼片段JavaScript瀏覽器
- jquery獲取瀏覽器客戶區尺寸程式碼例項jQuery瀏覽器
- js獲取瀏覽器客戶區尺寸程式碼例項JS瀏覽器
- jQuery獲取視窗尺寸的例項程式碼jQuery
- 區分瀏覽器視口的尺寸瀏覽器
- javascript獲取視窗大小例項程式碼JavaScript
- 檢測360瀏覽器javascript程式碼例項瀏覽器JavaScript
- javascript判斷uc瀏覽器程式碼例項JavaScript瀏覽器
- JavaScript獲取瀏覽器、元素、螢幕的寬高尺寸JavaScript瀏覽器
- 使用javascript判斷瀏覽器核心程式碼例項JavaScript瀏覽器
- 獲取img圖片原始尺寸程式碼例項
- JavaScript獲取星期程式碼例項JavaScript
- js獲取瀏覽器版本作業系統等資訊程式碼例項JS瀏覽器作業系統
- javascript獲取視訊播放時間程式碼例項JavaScript
- javascript 獲取瀏覽器資訊JavaScript瀏覽器
- js獲取元素的實際尺寸程式碼例項JS
- js如何實現清空瀏覽器快取程式碼例項JS瀏覽器快取
- 關閉瀏覽器視窗彈出提示程式碼例項瀏覽器
- 判斷IE瀏覽器程式碼例項瀏覽器
- javascript獲取主機域名程式碼例項JavaScript
- javascript獲取元素封裝程式碼例項JavaScript封裝
- javascript獲取url引數程式碼例項JavaScript
- 關閉瀏覽器視窗彈出警告視窗程式碼例項瀏覽器
- jQuery獲取瀏覽器視窗和文件視窗的高度程式碼jQuery瀏覽器
- javascript判斷瀏覽器的型別和版本程式碼例項JavaScript瀏覽器型別
- 判斷瀏覽器型別和版本的javascript程式碼例項瀏覽器型別JavaScript
- javascript相容各個瀏覽器的獲取事件源物件程式碼JavaScript瀏覽器事件物件
- js獲取上傳圖片尺寸和格式程式碼例項JS
- jquery獲取圖片的實際尺寸大小程式碼例項jQuery
- js檢測搜狗瀏覽器、百度瀏覽器、微信瀏覽器程式碼例項JS瀏覽器
- javascript獲取顯示器寬度和高度程式碼例項JavaScript
- js判斷IE瀏覽器程式碼例項JS瀏覽器
- js判斷微信瀏覽器程式碼例項JS瀏覽器
- 相容所有瀏覽器的progress程式碼例項瀏覽器
- javascript設定或者獲取cookie程式碼例項JavaScriptCookie
- javascript獲取本機ip地址程式碼例項JavaScript
- javascript獲取指定元素父元素程式碼例項JavaScript