相关参数以及测试结果
1、
document.body.clientWidth：网页可见区域(body 内容)宽
document.body.clientHeight：网页可见区域(body 内容)高
重点理解clientHeight
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="initial-scale=1 ,maximum-scale=1, user-scalable=no"> <!-- 苹果 --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 苹果手机自动将号码变为 a 链接格式 --> <meta name="format-detection" content="telephone=no" /> <!-- <link rel="stylesheet" href=""> --> </head> <body> </body> </html>
此时输出的clientHeight结果为 0
但是如果给内容添加一个
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="initial-scale=1 ,maximum-scale=1, user-scalable=no"> <!-- 苹果 --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 苹果手机自动将号码变为 a 链接格式 --> <meta name="format-detection" content="telephone=no" /> <!-- <link rel="stylesheet" href=""> --> </head> <body> <div style="height:500px;100%;background-color:green;"></div> </body> </html>
此时输出的clientHeight结果为 500px;
2、
document.body.offsetWidth：网页可见区域(body 内容)宽(包括边线和滚动条的宽)
document.body.offsetHeight：网页可见区域(body 内容)高(包括边线的宽)
经过测试与第一种结果相同：测试环境为谷歌和狐火浏览器
3、