【教学视频】封装检测屏幕宽度【可视区】案例：
<!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 {
width:window.innerWidth,
height:window.innerHeight
}
}else if(document.compatMode === "CSS1Compat") { // 标准模式
return {
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
}
}
return { // 怪异模式【不带有DTD】
width: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 {
width: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>
直接使用标准模式封装。
原文地址：https://www.cnblogs.com/liudaihuablogs/p/9472320.html
时间： 2024-11-10 13:54:17