正文
html5屏幕自适应的简单介绍
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
html5制作工具怎么做屏幕自适应
感应式设计，简单来说，就是当用不同设备访问时，能够根据设备的宽度和高度对设备进行动态的适配；例如，用iPhone4、iPhone5、iPhone6、PC、iPad访问同一个网址，正好能打开一个适合该设备的一个HTML5的页面，不留白边，不变形。这就算是感应式设计了，也就是本文说的“屏幕自适应”。由于设备分辨率不同，长宽比不同，如果设计一次，就要适应所有的屏幕（包括PC），这个几乎是不可能的。主要有以下三种情况：
1. 如果等比例缩放，内部位置关系会发生变化，会严重影响用户体验；同时，设备屏幕之间不存在等比例的关系，所以同样会有部分屏幕内容无法显示或留白边；
2. 如果把小屏幕适配好，放在更高的大屏幕里面，那两边就会有白边；或者把图扯大，这样就会变形；
3. 如果把大屏幕适配好，放在小屏幕中，就有些部分会丢失。
除非借助未来的AI（人工智能）的发展，否则很难自动解决这个问题。以前的网站设计，其实也是分开几种版面进行设计的，例如，根据宽度为多少时候采用一种设计板式。
所以，我就纳闷了，现在HTML5工具到底是如何实现感应式的呢？
经研究发现，一共有两种方式：
第一种，伪“感应式”设计：（HTML5模板类方案）
上图是HTML5模板类测试结果，依次是iPhone4、iPhone5、iPhone6
可以看出iPhone4时，变形最严重，iPhone5效果最好，iPhone6是等比例缩放后，两侧边缘，有些像素显示不了。
因此，这种“感应式”，称之为伪“感应式”HTML5工具，在设计时不会留白边，但是要求尽量把内容都往中间放，需要设计一张名为“背景”的底图，用于拉伸时用。
存在的问题：
1. 内容都要居中放置，别放上下个边；例如，把按钮放到最下面，iPhone打开后，就会看不到按钮；
2. 不可能适应PC、Pad等设备。
结论：
简单、应急时使用。
第二种，多版面感应式设计：（VXPLO互动大师方案）
用于互动大师，通过添加 Device控件的方式，实际上还是需要设计几个版面（设计上多数可以Ctrl-C +Ctrl-V，所以设计上并不算麻烦），因此本质上是真正的“感应式”设计，只要稍微勤快点儿，是可以一个URL地址，完美适应多个屏幕的，包括PC和Pad。用于互动大师，通过添加 Device控件的方式，实际上还是需要设计几个版面（设计上多数可以Ctrl-C +Ctrl-V，所以设计上并不算麻烦），因此本质上是真正的“感应式”设计，只要稍微勤快点儿，是可以一个URL地址，完美适应多个屏幕的，包括PC和Pad。
结论：要做真正的“感应式”设计，自动适应多个屏幕，又不想写代码，就只能用互动大师去做。设计中不会出现任何变形或丢失情况，不过需要多设计几个版面，一般如果是手机端的轻应用设计iPhone 4 5 6的分辨率就可以了。
相关问答
Q1: HTML5里面怎样自动适应手机屏幕的高度
HTML5里面自动适应手机屏幕的高度方法：
使用meta标签，这也是普遍使用的方法
meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/
解释该标签的含义：
height=device-width 就是设置页面的高度，为手机的高度
Q2: html5制作工具怎么做屏幕自适应？
解决方案1：
首先要在html页面头部加上下面的代码;viewport"，不懂可以百度;content="，一些小的模块可以用固定尺寸;meta , name="。再就是css中要应用到媒体查询，不能不用固定尺寸。
其次要把页面中的宽度修改为百分比;width=device-width; ，也就是@media;initial-scale=1"
解决方案2：
建议你看一下网上的教程或者案例，自己对比学习再写。
建议：如果是小白的话，要不然不会自适应屏幕大小的，只要编写的html代码符合html5规则就行html5不是转化的，建议看一下html5标签文档
解决方案3：
看之前是怎么做的，最好都调整成百分比的，这样最省事。
Q3: html5 Canvas 如何自适应屏幕大小？
可以用JS监控屏幕大小，然后调整Canvas的大小。在代码中加入JS
$(window).resize(resizeCanvas);
function resizeCanvas() {
canvas.attr("width", $(window).get(0).innerWidth);
canvas.attr("height", $(window).get(0).innerHeight);
context.fillRect(0, 0, canvas.width(), canvas.height());
};
resizeCanvas();
就可以了。
canvas 标签只是图形容器，您必须使用脚本来绘制图形。
Q4: html5里面怎样自动适应手机屏幕的高度
有两种
1.通过设置viewport参数
2.使用css3中的缩放
两种方法都需要获取当前屏幕大小然后根据网页宽度来计算缩放比例，然后进行缩放。但是因为目前手机种类繁多，浏览器种类也很多，所以每种方法各自都有不少的问题。
/spanmeta 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：表示用户是否可以调整缩放比例
Q5: html5设置图片自适应屏幕宽度
使用百分比，比如
img
src='../a.ipg'
style='width:50%'
/
这样就会保持屏幕的50%的宽度。
如果有上级标签，比如：
div
img
src='../a.ipg'
style='width:50%'
/
/div
那图片大小就是div宽度的50%，div没有设置宽度就会默认是屏幕宽度，如果设置了宽度，就要注意
