两种简单的移动开发的技巧，可以让你快速上手移动端项目，适配各种屏幕大小。
一、使用meta标签使网页宽度自适应手机屏幕
1 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
在网页的<head>中增加这句话，可以让网页的宽度自动适应手机屏幕的宽度。<meta> 元素可提供有关页面的元信息。<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1：表示初始的缩放比例
minimum-scale=1：表示最小的缩放比例
maximum-scale=1：表示最大的缩放比例
user-scalable=no：表示用户是否可以调整缩放比例
利用这种方法来使网页自适应手机屏幕之后，在页面布局中，css定义宽度的时候最好不要使用具体的值（例如xx px），而是应该使用百分比。
需要特别注意的是：这种方法的字体大小要使用em或者rem，使用px就不会随着屏幕大小的变化而变化。
二、使用js对网页进行缩放
这种方法与第一种方法不同的是：在开发过程中，完全不用考虑适配问题，不用使用百分比，甚至字体可以直接使用px。这种方法是利用一段js代码来对网页进行等比缩放，可以直接将页面宽度写死，然后根据 固定宽度 进行开发。
首先将下面这段js代码放在要开发的页面中。
1 function bodyScale() {
2 var devicewidth = document.documentElement.clientWidth;
3 var scale = devicewidth / 720;
4 document.body.style.zoom = scale;
5 }
6 window.onload = window.onresize = function () {
7 bodyScale();
8 };
另外，这两种方法不要同时使用，比如用了第二种后，在用百分比布局，有时候你的布局会乱掉，切记切记。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
