2. 程式人生 > >js 瀏覽器 寬高 各種

js 瀏覽器 寬高 各種

阿新 • • 發佈：2018-09-06
setw body ram .org 大小 屏幕分辨率 line firefox color

常用:

JS 獲取瀏覽器窗口大小

  1. // 獲取窗口寬度
  2. if (window.innerWidth)
  3. winWidth = window.innerWidth;
  4. else if ((document.body) && (document.body.clientWidth))
  5. winWidth = document.body.clientWidth;
  6. // 獲取窗口高度
  7. if (window.innerHeight)
  8. winHeight = window.innerHeight;
  9. else if ((document.body) && (document.body.clientHeight))
  10. winHeight = document.body.clientHeight;
  11. // 通過深入 Document 內部對 body 進行檢測，獲取窗口大小
  12. if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
  13. {
  14. winHeight = document.documentElement.clientHeight;
  15. winWidth = document.documentElement.clientWidth;
  16. }

詳細:

關於獲取各種瀏覽器可見窗口大小:

  1. function getInfo()
  2. {
  3. var s = "";
  4. s = " 網頁可見區域寬：" document.body.clientWidth;
  5. s = " 網頁可見區域高：" document.body.clientHeight;
  6. s = " 網頁可見區域寬：" document.body.offsetWidth " (包括邊線和滾動條的寬)";
  7. s = " 網頁可見區域高：" document.body.offsetHeight " (包括邊線的寬)";
  8. s = " 網頁正文全文寬：" document.body.scrollWidth;
  9. s = " 網頁正文全文高：" document.body.scrollHeight;
  10. s = " 網頁被卷去的高(ff)：" document.body.scrollTop;
  11. s = " 網頁被卷去的高(ie)：" document.documentElement.scrollTop;
  12. s = " 網頁被卷去的左：" document.body.scrollLeft;
  13. s = " 網頁正文部分上：" window.screenTop;
  14. s = " 網頁正文部分左：" window.screenLeft;
  15. s = " 屏幕分辨率的高：" window.screen.height;
  16. s = " 屏幕分辨率的寬：" window.screen.width;
  17. s = " 屏幕可用工作區高度：" window.screen.availHeight;
  18. s = " 屏幕可用工作區寬度：" window.screen.availWidth;
  20. s = " 你的屏幕設置是 " window.screen.colorDepth " 位彩色";
  21. s = " 你的屏幕設置 " window.screen.deviceXDPI " 像素/英寸";
  22. //alert (s);
  23. }
  24. getInfo();

在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可獲得，很簡單，很方便。
而在公司項目當中：
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox則使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原來是W3C的標準在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在頁面中添加這行標記的話 在IE中：
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度
在FireFox中：
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度
?
在Opera中：
document.body.clientWidth ==> 可見區域寬度
document.body.clientHeight ==> 可見區域高度
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）
document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）
而如果沒有定義W3C的標準，則
IE為：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox為：
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）
Opera為：
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）

js 瀏覽器 寬高 各種

相關推薦

js 瀏覽器 寬高 各種

setw body ram .org 大小 屏幕分辨率 line firefox color 常用: JS 獲取瀏覽器窗口大小 // 獲取窗口寬度 if (window.innerWidth) wi

js/jq獲取瀏覽器寬高

由於移動端和PC端頁面大小不一樣，需要適應移動端，要在head新增 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maxi

js 實現寬高相等隨手機螢幕大小改變

讓圖片隨螢幕大小而改變並且保持高寬比例一樣 假設一張圖片為實際螢幕的50%的寬度，需要高度=寬度，用css是很難完成的，但是用js實現還是挺簡單的 //獲取元素寬度 var imgWidth = document.querySelector(".productimg").getBoundingC

元素通過js設定寬高

html程式碼中用到object元素，但想通過js設定寬高。 如果在head中設定，會不起作用。 必須放到object後面才行。比如： <html> <head></

JS獲取瀏覽器中的各種寬高值

width： clientWidth：物件實際內容的寬度，不包含邊線，最大不超過視口寬度 offsetWidth：物件實際寬度，包含邊線，最大不超過視口寬度 scrollWidth：物件實際寬度，不包含邊線，可超過視口寬度 height：（都可超過視

js和jquery中的各種寬高

自己 大堆 com pre fff 技術分享 bsp ges 窗口 js裏面的寬度太多了，一大堆的，的確需要好好的整理總結一下，不然自己就是一個亂的。 先看看window下面的寬高 1-- window.outerWidth window.outerHeight

js各種寬高的總結

doc round highlight 20px ttr nth setw get 寬高 1.clientWidth和clientHeight指元素的可視部分寬度和高度，就是padding+content如果沒有滾動條，就是設定的寬度和高度 如果有滾動條，就是設定的寬度和

js獲取各種寬高

fun cti oct eve page 部分 屬性 char lan 1.窗口和瀏覽器 window.innerWidth、window.innerHeight 瀏覽器內部可用寬高 window.outerWidth、window.outerHeight 瀏覽器整

js 元素的各種位置尺寸寬高

元素.offsetLeft[Top]:只讀 屬性 當前元素到定位父級的距離（偏移值） 到當前元素的offsetParent的距離 如果沒有定位父級    offsetParent -> body    offsetLeft -> h

js獲取網頁各種寬高

 網頁可見區域寬：document.body.clientWidth;                              $(window).width() ；  網頁可見區域高：document.body.clientHeight;            

JS瀏覽器獲取寬高

網頁可見區域寬：document.body.clientWidth網頁可見區域高：document.body.clientHeight (html下獲取瀏覽器高度，xhtml下獲取元素總高度)網頁可見區域高：document.documentElement.clientHeight (xhtml下獲取瀏覽器高

JS 、JQ 獲取寬高總結

bsp image 技術 獲取 cnblogs 技術分享 src 寬高 png JS 、JQ 獲取寬高總結

js 獲取圖片寬高 和 圖片大小

src 查看 nts 執行 input java image 創建 wid 　　 　　 　　獲取要查看大小的img 　　varimg_url = ‘http://img5.imgtn.bdimg.com/it/u=4267222417,1017407570&fm=

【整理】原生js和jQ獲取窗口寬高及滾動條的方法和函數

javascript 滾動條 jq 窗口距離 原生js和jQ獲取窗口寬高及滾動條的方法和函數 一。原生js獲取 1.實際寬高（不包括工具欄，滾動條的視口高度，ie6.7.8不支持） window.innerHeight window.innerWidth 2.顯示屏寬高 screen.h

jquery或者js獲取到元素寬高精確到小數

OS 模式 idt alert 新版 老版本 保留 兼容ie rom 首先我們應該知道用jQuery的width()方法獲取元素的寬高及樣式屬性數值時，如果元素的屬性是浮點數，會自動四舍五入成整數。 而如果我們就是想獲取實際的帶小數的屬性數值時該用什麽方法。 在使用獲取

取不同瀏覽器可視區域寬高方法

new function family The port onos idt pac offset function getViewportOffset(){ if(window.innerWidth){ return { w:window.

jquery獲取元素各種寬高及頁面寬高總結

轉載：https://www.cnblogs.com/goloving/p/7113567.html     $(function(){      var a = $("#div").width(),//width()返回元素的寬高，不包

js實現字型和容器寬高隨視窗改變

  用於字型大小和容器的寬高字型和寬高設為rem就可以了 var html = document.documentElement; 　　function fonts(){ 　　var hW = html.offsetWidth;   　　var&

你真的懂js獲取可視區寬高嗎

可能你會覺得獲取可視區寬高不是很簡單嗎 原生js獲取高度不就是就window.innerHeight一句話的事，可是真的這麼簡單嗎 來看個測試頁面,如果頁面帶有橫向縱向的滾動條，我們打印出各個高度進行檢視對比 順便你也可以看看document.body和document.document

JS實現圖片的預覽及預覽圖片的寬高獲取

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖片預覽</title> </head> <style