为什么我的高用了document.body.clientHeight高度变成了160。。html中有写两个height为100%

源自：5-2 屏幕自适应

为什么我的高用了document.body.clientHeight高度变成了160。。html中有写两个height为100%

var WINDOW_WIDTH = document.body.clientWidth;

var WINDOW_HEIGHT = document.body.clientHeight;

var MARGINTOP = Math.round(WINDOW_HEIGHT/4);

var MARGINLEFT = Math.round(WINDOW_WIDTH/10);

var RADIUS = Math.round(WINDOW_WIDTH * 4 / 5 / 126) - 1;

var minus = getCurTime();

var balls = [];

var colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];

window.onload = function(){

var canvas = document.getElementsByTagName('canvas')[0];

var context = canvas.getContext('2d');

canvas.width = WINDOW_WIDTH;

canvas.height = WINDOW_HEIGHT;

setInterval(function(){

clock(context);

update();

},50);

}

提问者：其实TAMA酱不是我名字 2016-05-13 21:32

个回答

慕标2318052

2019-12-06 00:45:59

奇怪，我也是遇到这个问题，但是，把index.html文件中最上面那句
奇怪，我也是遇到这个问题，但是我把index.html文件最上面一行 “<!DOCTYPE html>”删掉，就可以了，不知道为什么，有大侠帮忙解释一下吗？

0
77MICKY

2018-08-09 10:03:34

应该是内容撑不满一屏导致的clientHeight参数获取错误，可以在css里面加一句
html{
height：100%；
overflow： hidden；
}
这个时候console出来的高度才对

0
tracydragon

2016-10-18 23:12:00

我也出现了相同的问题
改成这样就可以了<canvas id="canvas" style="width: 100%;height: 100%"></canvas>

1
慕移动6874463

2016-06-29 15:50:56

可能浏览器兼容问题，我该成了WINDOW_HEIGHT = document.body.scrollHeight||document.documentElement.scrollHeight;就全部显示但，有滚动条.然后
body{
overflow: hidden;
}
就可以了

0
慕粉3417056

2016-05-26 17:17:02

把html文件顶部的<!DOCTYPE html PUBLIC xxxxxxxx省略xxxxxxxxx> 删掉应该可以解决这个问题。

2
dl_嘛哩嘛哩哄

2016-05-14 16:15:32

我也是，而且我把老师的源码下载下来运行也是只显示153px的高度，为什么为什么

0