【教学视频】封装检测屏幕宽度【可视区】案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>检测发现1:所有浏览器都支持怪异模式了，所以没必要在单独判断</p> <p>检测发现2：ie9以上版本标准模式都适用，但是ie9以下只有标准模式适用</p> </body> </html> <script> function client() { if(window.innerWidth != null) { // ie9 及以上版本 return { window.innerWidth, height:window.innerHeight } }else if(document.compatMode === "CSS1Compat") { // 标准模式 return { document.documentElement.clientWidth, height:document.documentElement.clientHeight } } return { // 怪异模式【不带有DTD】 document.body.clientWidth, height:document.body.clientHeight } } console.log("ie9及以上版本"+window.innerWidth); console.log("标准版本"+document.documentElement.clientWidth); console.log("怪异模式:"+document.body.clientWidth); var c = client(); document.write(c.width); </script>
经过测试：谷歌，火狐，ie9+,ie678均支持document.documentElement.clientWidth【标准模式】。测试去除DTD，标准模式对所述浏览器也支持。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>检测发现1:所有浏览器都支持怪异模式了，所以没必要在单独判断</p> <p>检测发现2：ie9以上版本标准模式都适用，但是ie9以下只有标准模式适用</p> </body> </html> <script> function client() { return { document.documentElement.clientWidth, height:document.documentElement.clientHeight } } console.log("ie9及以上版本"+window.innerWidth); console.log("标准版本"+document.documentElement.clientWidth); console.log("怪异模式:"+document.body.clientWidth); var c = client(); document.write(c.width); </script>
直接使用标准模式封装。
