大部分内容来自于博客地址：http://www.duanliang920.com/learn/web/html5/321.html
1.添加viewport标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
width ---- viewport的宽度（width=device-width意思是：宽度等于设备宽度） height ------ viewport的高度（height=device-height意思是：高度等于设备宽度） initial-scale ----- 初始的缩放比例 minimum-scale ----- 允许用户缩放到的最小比例 maximum-scale ----- 允许用户缩放到的最大比例 user-scalable ----- 用户是否可以手动缩放
2、禁止将数字变为电话号码
<meta name="format-detection" content="telephone=no" />
3、iphone设备中的safari私有meta标签
<meta name="apple-mobile-web-app-capable" content="yes" />
它表示：允许全屏模式浏览，隐藏浏览器导航栏
4、iphone的私有标签
<meta name="apple-mobile-web-app-status-bar-style" content="black">
它指定的iphone中safari顶端的状态条的样式
默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）
另外还有一个个性化的link标签，它支持用户将网页创建快捷方式到桌面时，其图标变为我们自己定义的图标。比如手机腾讯网上的标签：
<link rel="apple-touch-icon-precomposed" href="http://3gimg.qq.com/wap30/info/info5/img/logo_icon.png">
不过腾讯对这个png图标的命名并不规范，常规我们要求文件名应为 apple-touch-icon.png 或 apple-touch-icon-precomposed.png ，前者的命名iOS会为这个图标自动添加圆角、阴影和高亮覆盖层，后者则不会添加这些效果。
一、手机网站基本框架代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>手机网站</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta name="format-detection" content="telephone=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="author" content="duanliang, duanliang920.com" /> <style> body{font-size:62.5%;font-family:"Microsoft YaHei",Arial; overflow-x:hidden; overflow-y:auto;} .viewport{ max-width:640px; min-width:300px; margin:0 auto;} </style> </head> <body> <div> 大家好！我是段亮，这是我的第一个手机网页哦！ </div> </body> </html>
二、rem单位js适配代码
<script> (function (doc, win) { var docEl = doc.documentElement,
//获取窗口宽度变化的事件名称orientationchange或者resize resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘, recalc = function () {
//把文档宽度保存到变量中 var clientWidth = docEl.clientWidth;
//如果不存在 docEl.clientWidth，就不再执行接下来的那一个语句，即不去设置fontsize大小 if (!clientWidth) return; docEl.style.fontSize = 20 * (clientWidth / 320) + ‘px‘; };
//如果document不存在addEventListener方法则后面的代码不再执行。 if (!doc.addEventListener) return;
//否则为window添加resize事件，并对document添加dom加载事件 win.addEventListener(resizeEvt, recalc, false); doc.addEventListener(‘DOMContentLoaded‘, recalc, false); })(document, window); </script>
布局：一般设计师给的效果图是640*960.我们就按照320的比例来做,就是宽度减少一半。
一个举例：
比如:我们要设置一个宽度为60px的盒子.换算成rem单位就是:60/2/20 = 1.5rem; 前提是我们需要在头部添加以下代码:
PS:效果图实际像素为60px,在手机端就是30px,在转化成rem单位就在除以20。
html { font-size : 20px; } @media only screen and (min-width: 401px){ html { font-size: 25px !important; } } @media only screen and (min-width: 428px){ html { font-size: 26.75px !important; } } @media only screen and (min-width: 481px){ html { font-size: 30px !important; } } @media only screen and (min-width: 569px){ html { font-size: 35px !important; } } @media only screen and (min-width: 641px){ html { font-size: 40px !important; } }
一、手机网站基本框架代码新版
<!DOCTYPE HTML> <html> <head> <!--申明当前页面的编码集--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--网页标题--> <title>HTML5移动端开发模板</title> <!--网页关键词--> <meta name="keywords" content="" /> <!--网页描述--> <meta name="description" content="" /> <!--适配当前屏幕--> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <!--禁止自动识别电话号码--> <meta name="format-detection" content="telephone=no" /> <!--禁止自动识别邮箱--> <meta content="email=no" name="format-detection" /> <!--iphone中safari私有meta标签, 允许全屏模式浏览,隐藏浏览器导航栏--> <meta name="apple-mobile-web-app-capable" content="yes" /> <!--iphone中safari顶端的状态条的样式black(黑色)--> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style type="text/css"> /*reset 重置*/ body,ul,ol,p,h1,h2,h3,h4,h5,dl,dd,form,input,textarea, td,th,button,strong,em,select,video,canvas{margin:0;padding:0;} li{list-style:none;vertical-align:top;} table{ border-collapse:collapse;} textarea{resize:none;overflow:auto;} img{ border:none; vertical-align:middle;} em{ font-style:normal;} a{ text-decoration:none;} a,input{ -webkit-appearance: none;/*屏蔽阴影*/ -webkit-tap-highlight-color:rgba(0,0,0,0); /*ios android去除自带阴影的样式*/ } a, img { /* 禁止长按链接与图片弹出菜单 */ -webkit-touch-callout: none; } html, body { /* 禁止选中文本(如无文本选中需求,此为必选项) */ -webkit-user-select: none; user-select: none; } /*public*/ html { font-size : 20px; } @media only screen and (min-width: 401px){ html { font-size: 25px !important; } } @media only screen and (min-width: 428px){ html { font-size: 26.75px !important; } } @media only screen and (min-width: 481px){ html { font-size: 30px !important; } } @media only screen and (min-width: 569px){ html { font-size: 35px !important; } } @media only screen and (min-width: 641px){ html { font-size: 40px !important; } } body{font-family: "Helvetica Neue", Helvetica, "STHeiTi", sans-serif; overflow-x:hidden; overflow-y:auto; font-size:0.7rem; } .clear{zoom:1;} .clear:after{content:‘‘; display:block; clear:both;} .fl{float:left;} .fr{float:right;} .viewport{ max-width:640px; margin:0 auto; overflow-x:hidden;} </style> </head> <body> <div> <div>这是一个移动端开发模板哟!</div> </div> </body> </html>
原文：http://www.cnblogs.com/rage-the-dream/p/6384715.html