用JS调制屏幕大小。
1.CSS 方面：去掉所有元素的外间距、内边距，html 和 body 宽高设为 100%，canvas 元素 display 设为 block。
2.JS 方面：监听窗口的 resize 事件，在窗口大小改变的同时调整 canvas 的大小。
3.完整代码这里我们使用 jQuery 来处理窗口尺寸改变事件响应，以及属性设置。
4.同时使用 $(window).get(0).innerHeight 获取窗口高度，而不是 $(window).height()。是因为后者效果并不完美，无法返回所有浏览器窗口的完整高度值，这样浏览器窗口中 canvas 元素和滚动条的四周可能会仍存在白色区域。
5.代码公式：<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="jquery-3.1.1.js"></script><style>* {margin: 0padding: 0}html, body {height: 100%width: 100%}canvas {display: blockbackground: #D6F8FF}</style><script type="text/javascript">$(function() {//添加窗口尺寸改变响应监听$(window).resize(resizeCanvas)//页面加载后先设置一下canvas大小resizeCanvas()})//canvasfunctionresizeCanvas{$("#myCanvas").attr("width"$(window).get(0).innerWidth)$("#myCanvas").atr("height", $(window).get(0).innerHeight)}</script></head<body<canvas id="myCanvas" width="400" height="200"></body>。
</html>
目前大部分网站已经逐渐尝试使用HTML5进行重构，但基本大多停留使用新的HTML5语义化标签上。对于低版本IE浏览器，兼容新的HTML5标签很容易。而HTML5的新属性用到的不多，通常都是新属性+js兼容法。对于特殊的功能性新标签，国内几乎没有大型网站使用，如video、audio、canvas等。在国内，要是等现代浏览器普及了再开始用HTML5那至少要5年以上，IE6应该还有1年左右就差不多灭绝了，IE8短时间内不会灭绝。建议可以考虑HTML5+兼容性辅助，让现代浏览器显示炫酷效果，老浏览器保证业务正常即可，不一定和HTML5版本样式完全一样，只要最基本功能有就行了。移动端大多是webkit内核，可放心使用HTML5。第1部分：基本的屏幕适配知识：
1、屏幕大小
在Android系统中，把屏幕大小分为以下4种：small、normal（标准）、large、
extra large（引申为更大的屏幕）。
2、屏幕密度
在Android系统中，屏幕密度指的是在指定的屏幕大小区域内，有多少个像素。基本单位为dpi（点/每英寸）。
基本包括4种密度：low、dedium(中等)、high、extra high（引申为更高的密度）。
常见的屏幕密度如下：QVGA(240x320)、HVGA(320x480)、WVGA800（480x800）
第2部分：
Android官方的解决方案：
从Android1.6版系统起，res文件夹下面的drawable文件夹由原来的1个变为了3个。
如下图所示：
这三个文件夹分别用来存放高密度、中等密度和低密度的图片。
具体的适配方法，用一个案例来说明。
例如：
创建一个工程：test_demo_01
在3个drawable文件夹下面分别放置高密度、中等密度和低密度的图片。
然后在AndroidMainfest.xml中添加如下内容：
此外需要注意的是：
1、图片布局的基本单位应该是dip。
2、不要使用绝对布局（AbsoluteLayout）。
以下是3种屏幕的自适应结果
