用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>
有两种1.通过设置viewport参数
2.使用css3中的缩放
两种方法都需要获取当前屏幕大小然后根据网页宽度来计算缩放比例，然后进行缩放。但是因为目前手机种类繁多，浏览器种类也很多，所以每种方法各自都有不少的问题。
<</span>meta name=“viewport” content=“width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes” />
在网页的中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。
其中：
width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=0.5：表示最小的缩放比例
maximum-scale=2.0：表示最大的缩放比例
user-scalable=yes：表示用户是否可以调整缩放比例
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）