（15）HTML5-分辨率检测

自适应网页是HTML5设计的最大特色之一，也就是可以按照用户所使用的设备的分辨率，窗口尺寸等信息，自动选择显示效果最佳的版面来显示。为了达到选择最佳版面显示效果，就需要先检测当前的屏幕信息再来进行判断与调整。

{screen.height/screen.width}

此属性可以检测当前设备所使用的分辨率，在计算机中的分辨率信息可以在”桌面“上的单击鼠标右键，通过”屏幕分辨率“来查询。

{clientHeight/clientWidth}

此属性可以查询整个浏览器窗口的长度尺寸，数值范围包括整个浏览器窗口，此数值会随着浏览窗口的缩放而改变。

{availHeight/availWidth}

此属性可以查询浏览器的可用尺寸，数值的范围仅有”显示内容“的部分，也就是网址栏，网页标签都不计算在内。此数值将计算浏览器最大化时可用的尺寸，不会因为浏览器页面的缩放而改变。

检测当前浏览器页面的高度：document.documentElement.clientHeight

检测当前浏览器页面的宽度：document.documentElement.clientWidth

检测屏幕分辨率的高度：screen.height

检测屏幕分辨率的宽度：screen.width

检测浏览器最大可用范围的高度：screen.availHeight

检测浏览器最大可用范围的宽度：screen.availWidth

在HTML5游戏开发中检测屏幕分辨率与尺寸的目的，最主要就是为了检测当前玩家使用电脑网页方式还是用手机来启动游戏，而后就是选择最合适的版面来显示游戏画面。

这里提供了自动转换电脑版与移动版面供大家参考，首先使用screen.availWidth来获取浏览器的可用宽度，由于一般手机屏幕的尺寸是320X480，所以使用if判断语句判断：

如果浏览器宽度小于321，这代表当前设备是手机，那就调用手机版的设置；否则就调用电脑版的设置。