用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>
H5的尺寸一般设计为640x1136px
既满足了显示需求，又能降低用户加载图片需要的带宽。
可以用各种分辨率的移动智能手机查看我们设计的H5页面时，当然，也会出现如下的情况，内容显示不全，甚至一些重要内容和按钮都会被遮挡。
第一：背景图片必须采用background-size:cover来实现。
第二：我们在进行H5页面内容规划布局设计的时候，不能把重要内容放在太偏下的位置或者偏上，否则前端布局时可能出现内容显示不全的情况。
扩展资料：
标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁。
为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG） 的组织。
WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟） 专注于XHTML2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。
参考资料：百度百科－HTML5
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）