在手机浏览器里,如何设置一个宽高为浏览器空白部分的画布?

最近想在手机浏览器上写个移动端的小游戏,可是光排版就各种问题啊。。打开一个空的html文档时浏览器会显示一个空白的页面,我想问的是,怎么在那个空白页面中创建一个等宽高的画布啊?就是刚刚好能放入空白区的,不产生滚动条,却能将整个页面的空白填补上,。

我试过document.body.clientHeight ,document.body.offsetHeight,document.body.scrollHeight ,window.screen.height ,window.screen.availHeight 等等,某些的确能在PC上正确显示,但一移植到手机上,总会产生一个y轴的滚动条,不过滚动幅度不大,就一点,但很影响游戏体验。有没有什么方法能解决的啊,哪怕禁止它(手机浏览器)滚动也行,我要得到的是一个静止的恰好填补空白区域的页面额。。是不是和手机上的浏览器有关啊,我用的是百度的,我是不是该用jquery mobile试试??很小白的问题,学html没学好,悔 ~~ 求大神解决!!

已邀请:

supergaryli

赞同来自:

腾讯ISUX的实践表明移动端用JS设置高宽不靠谱,那么还是使用CSS方式解决吧。




Android手机的屏幕碎片化非常严重,各种各样的分辨率非常之多,那么如何让游戏可以适配这些机型就显得尤为重要。这里也是前前后实验了多种方案。先想到用JS来动态的根据分辨率来设置相关元素的大小,但要么在某些机型中获取失败,要么用赋值缩放相关元素时造成游戏崩溃……





关键代码:




<code>.game {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
</code>



以上代码使游戏容器绝对定位之后,上下左右四边都与手机屏幕贴紧,从而做到了适配各种屏幕。

然后使用 background-size:cover; 让背景覆盖全屏,此代码可以使背景 自动缩放 至 覆盖 容器大小。






手机端的视口分两种,布局视口和可见视口。




  • 布局视口的高宽获取,是通过document.documentElement.clientWidth/clientHeight

  • 可见视口的高宽获取,是通过window.innerWidth/innerHeight.


手机端的浏览器为了网页的正常排版,在页面没有设置视口的时候,会把你的网页认作是优先针对桌面端制作的,因而把布局视口设定为980px(或800px,1024px取决于机型)。然后再做伸缩操作,把页面缩放到宽度正好容下(或者一定的比率,这一步也取决于浏览器和设定的initial-scale)。



因此,为了布局视口不被拉宽,,一定要在文档的里设定视口:



<code><meta name="viewport" content="width=device-width,initial-scale=1" />
</code>


做到这一步以后,布局视口即自适应于设备宽度。



注意单位,比如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值。详参这里

要回复问题请先登录注册