html5适配不同设备，h5页面适配

怎么制作html5网站页面让它适应电脑和手机的尺寸

首先建议你用html5来开发，然后，在网页的 中增加以上这句话：可以让网页的宽度自动适应手机屏幕的宽度。

utf-8meta name=viewport content=width=device-width， initial-scale=1 使用百分比定义宽度，CSS代码可以适当使用：media only screen and (max-width：449px){ } 自动根据屏幕像素 调用不同的CSS代码。

制作网站使页面大小自适应的方法代码如下：一种自适应建立计算机站网站的方法 全屏宽度主要在于CSS代码，将宽度设置为100%，而不是固定的像素值。代码如下。

相关问答

Q1: iH5要怎么做不同手机h5页面的适配?

在个人场景首页，选中H5场景；鼠标移动到“扫描二维码”，用手机微信扫描二维码，马上分享到微信。

可以通过webview方式访问远程，也可以把html5页面放在手机app端，本地方式进行访问。但都离不开webview。

在制作易企秀场景时，为了避免预览场景出现有白边情况，建议以图片方式插入页面中置顶作为背景，这样就可以让易企秀适应苹果手机尺寸了。

内容制作 内容制作是使用H5页面制作软件的直接目的，这里把内容制作划分为两大评测模块：编辑方便度和功能覆盖度。编辑灵活程度越高，内容制作越高效；功能覆盖度越高，内容制作越有质量。

Q2: html5怎么实现在不同设备上都正常显示?

打开HTML5网页代码。在网页头部加上新代码，让网页的宽度自适应设备的宽度。

建议你使用js判断客户端类型，然后在用js加载css。

其次，你需要把网页的宽度设置为百分比，不能写固定值。再就是要用到媒体查询了（@media），这样网页就可以适配不同分辨率的设备了。

iOS + Safari 打开手机web检查器。通过【设置】【Safari】【高级】【Web检查器】打开。见下图（点击查看大图），并且你会看到该选项下面对电脑操作的相应描述，照做就好。

所以，为了解决这个问题，建议用户在电脑上打开后另存为这个默认格式的文本文档再传到手机里面就可以了。

HTML5标签在浏览器展示存在的问题对于现阶段来说，使用HTML5标签可能遇到的最大问题就是如何在不支持新标签的浏览器中做恰当的处理。当我们在页面中使用HTML5元素时，可能会得到三种不同的结果。结果1：标签被当作错误处理并被忽略。

Q3: HTML5实现移动端自适应的几种方法介绍

第一种，伪“感应式”设计：（HTML5模板类方案）上图是HTML5模板类测试结果，依次是iPhoneiPhoneiPhone6 可以看出iPhone4时，变形最严重，iPhone5效果最好，iPhone6是等比例缩放后，两侧边缘，有些像素显示不了。

在文档流中，DIV的高度默认就是根据内容的高度自适应的。如果是想适配不同设备的窗口大小，可以设置百分比。或者通过position定位，然后设置top和bottom值。

宽度自适应需要对每个显示模块进行不同宽度的计算，在做html布局时需要大量的计算与适配。 宽度自适应为不同宽度显示器写布局元素时常用的css。

Q4: HTML5开发工具有哪些?

第【Google Web Toolkit】是现在大家还不熟悉的工具之一，主要用于开发浏览器应用的一个工具，不过库中支持很多【HTML5】的功能，包括对客户端，或者是web存储的支持，都可以实现。

MyEclipseMyEclipse，是十分优秀的用于开发Java、J2EE的Eclipse插件集合，MyEclipse的功能非常强大，支持也十分广泛，尤其是对各种开源产品的支持十分不错。

在开发移动和桌面应用的工具中，Sencha的定位是HTML5可视化应用开发。开发团队可以在一个单一集成的环境中完成应用的设计、开发和部署。开发者还可以开发SenchaTouch2和ExtJS4JavaScript应用，并实时预览。

Q5: h5页面和普通页面的区别

区别运行环境的不同 传统的网页H5的页面运行环境是浏览器，包括webview，而微信H5网页的运行环境并非完整的浏览器。

页面设计以简约为主；因为用户目标比较明显，以及受屏幕大小限制。所以页面设计以简约为主，配合色彩，突出重点信息。更加注重全局导航；WebApp应用场景非常多样，最典型的就是在微信内置浏览器。

功能上：h5网站可以包括网站新闻、产品、招聘信息的丰富管理功能；h5网页只是h5的长图文页面，主要应用于信息展示，信息收集，也可以植入支付系统。h5网站的信息容量更大。新工式h5建站平台可以实现移动版和网页版同步。

指代不同 h5：是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。

关于html5适配不同设备和h5页面适配的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。