头部添加代码：
<!--手机适配代码开始-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="robots" content="all" />
<meta name="viewport" content="width=1280">
<meta http-equiv="cache-control" content="no-siteapp">
<meta name="render" content="webkit|ie-comp|ie-stand">
<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
<!--手机适配代码结束-->
判断是手机还是PC：如果是手机跳转到新的页面
<script type="text/javascript">
function IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
if (!IsPC()) {
window.location.href = "index1.html";
}
</script>
viewport
手机浏览器把页面放到一个虚拟的‘窗口’中，通常这个虚拟的‘窗口’比屏幕宽，这样就不用把每个页面挤到很小的屏幕中，也不会破坏没有针对手机浏览器优化的网页布局，用户可以通过平移或缩放
用来定义layout viewport的宽度，如果不指定宽度则为厂商默认值。
<meta name='viewport' content="width=device-width">
initial-scale
如果想页面默认以某个比例放大或者缩小然后呈现给用户，那么可以通过定义initial-scale来完成。
initial-scale用于指定页面的初始缩放比例。
<meta name='viewport' content=' initial-scale=2'>//用户将会看到2倍大小的页面内容
<meta name="viewport" content="initial-scale=1" />//可以得到完美视口
maximum-scale
在移动端可能会考虑用户浏览不便，然后给与用户放大页面的权利，但同时又希望是在一定范围内放大，这时就可以使用maximum-scale来进行约束。
<meta name="viewport" content="initial-scale=1,maximum-scale=5" />
minimum-scale
minimum-scale是用来指定页面缩小比例的
<meta name="viewport" content="initial-scale=1,minimum-scale=1" />
user-scalable
如果你不想页面被放大或者缩小，通过定义user-scalable来约束用户是否可以通过手势对页面进行缩放即可。
该属性的默认值为yes，即可被缩放（如果使用默认值，该属性可以不定义）；当然，如果你的应用不打算让用户拥有缩放权限，可以将该值设置为no。
<meta name="viewport" content="user-scalable=no" />