最近想在手机浏览器上写个移动端的小游戏，可是光排版就各种问题啊。。打开一个空的html文档时浏览器会显示一个空白的页面，我想问的是，怎么在那个空白页面中创建一个等宽高的画布啊？就是刚刚好能放入空白区的，不产生滚动条，却能将整个页面的空白填补上，。
我试过document.body.clientHeight ，document.body.offsetHeight，document.body.scrollHeight ，window.screen.height ，window.screen.availHeight 等等，某些的确能在PC上正确显示，但一移植到手机上，总会产生一个y轴的滚动条，不过滚动幅度不大，就一点，但很影响游戏体验。有没有什么方法能解决的啊，哪怕禁止它（手机浏览器）滚动也行，我要得到的是一个静止的恰好填补空白区域的页面额。。是不是和手机上的浏览器有关啊，我用的是百度的，我是不是该用jquery mobile试试？？很小白的问题，学html没学好，悔 ~~ 求大神解决！！
腾讯ISUX的实践表明移动端用JS设置高宽不靠谱，那么还是使用CSS方式解决吧。
Android手机的屏幕碎片化非常严重，各种各样的分辨率非常之多，那么如何让游戏可以适配这些机型就显得尤为重要。这里也是前前后实验了多种方案。先想到用JS来动态的根据分辨率来设置相关元素的大小，但要么在某些机型中获取失败，要么用赋值缩放相关元素时造成游戏崩溃……
关键代码：
.game {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
以上代码使游戏容器绝对定位之后，上下左右四边都与手机屏幕贴紧，从而做到了适配各种屏幕。
然后使用 background-size:cover; 让背景覆盖全屏，此代码可以使背景 自动缩放 至 覆盖 容器大小。
手机端的视口分两种，布局视口和可见视口。
- 布局视口的高宽获取，是通过
document.documentElement.clientWidth/clientHeight。 - 可见视口的高宽获取，是通过
window.innerWidth/innerHeight.
手机端的浏览器为了网页的正常排版，在页面没有设置视口的时候，会把你的网页认作是优先针对桌面端制作的，因而把布局视口设定为980px（或800px，1024px取决于机型）。然后再做伸缩操作，把页面缩放到宽度正好容下（或者一定的比率，这一步也取决于浏览器和设定的initial-scale）。
因此，为了布局视口不被拉宽，，一定要在文档的<head>里设定视口：
<meta name="viewport" content="width=device-width,initial-scale=1" />
做到这一步以后，布局视口即自适应于设备宽度。
注意单位，比如retina屏幕的iPhone，宽是640px，这里的device-width取到的是320dip，即除以像素密度得到的值。因此你通过document.documentElement.clientWidth取到的值也会是320而非640。
在此时，就可以通过document.documentElement.clientHeight获取屏幕可用区域的高度，用js设置你的游戏舞台容器（div/canvas），也可以通过CSS方法做到100%高度自适应，就不赘叙了。
注意，这期间有可能遇到兼容性的问题，比如 Opera Mini 和 UC 可能会取到不正确的document.documentElement.clientWidth/clientHeight值。详参这里。