手机适配与viewport

头部添加代码：

<!--手机适配代码开始-->
  <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" />