客户区大小 clientWidth & clientHeight
加入了浏览器判断
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>111</title> 6 <style type="text/css"> 7 body{ 8 margin: 0; 9 padding: 0; 10 } 11 </style> 12 </head> 13 <body> 14 <div id="out1" style="width:200px;height:100px;overflow:scroll; margin:88px;"> 15 <div style="background:#666666;height:150px;"></div> 16 </div> 17 <script type="text/javascript" src="test13.js"></script> 18 </body> 19 </html>
1 function getViewport() { 2 if (document.compatMode == "BackCompat") { 3 return { 4 width: document.body.clientWidth, 5 height: document.body.clientHeight 6 }; 7 } else { 8 return { 9 width: document.documentElement.clientWidth, 10 height: document.documentElement.clientHeight 11 }; 12 } 13 } 14 console.log(getViewport().width); 15 console.log(getViewport().height);