基于原生JS移動端響應式解決方案：AUTOSTRAP

介紹

就目前移動端而言，已有比較成熟都響應式框架，類似于Bootstrap、AmazeUI、Skeljs。但是對于普通開發者來說，為了滿足快速開發的需求去學習和使用這些框架的時間成本是比較高的。所以，本著輕量、快速開發的原則，為大家提供了基于原生JS的移動動端解決方案，希望能在交流、使用中繼續優化AutoStrap。

原理

目前我們熟悉的開源前端框架都是柵格化布局，通過mediaQuery，在不同分辨率加載不同的css到達響應式的效果。同時還提供了諸多的JS組件供開發者使用。而AutoStrap是使用viewport，以iPhone4分辨率為模板，根據可視寬高調節縮放比例實現。具體內容下面的代碼會給出。

代碼

autostrap.js

/*!
 * AutoStrap v1.0.0 (http://largesoft.org)
 * Copyright 2015 Vern, Inc.
 */
var g = document.documentElement.clientWidth,
    h = document.documentElement.clientHeight,
    clientWidth = document.documentElement.clientWidth,
    viewport = document.getElementById("MobileViewport");
function isWeixin() {
    var a = navigator.userAgent.toLowerCase();
    return "micromessenger" == a.match(/MicroMessenger/i) ? !0 : !1
}
function renderPage() {
    var f = 1;
    g / h >= 320 / 486 ? (f = g / 486) : (f = g / 320);
    if(g == 320){
        f = 1;
    }
    viewport.content = "width=320, initial-scale=" + f + ", maximum-scale=" + f + ", user-scalable=no";
    if (320 != clientWidth && clientWidth == document.documentElement.clientWidth ||
     isWeixin() && (navigator.userAgent.indexOf("Android") > -1 ||
      navigator.userAgent.indexOf("Linux") > -1)) {
        var i = 320 / g,
            j = 486 / h,
            k = Math.max(i, j);
        k = k > 1 ? k : 160 * k, k = parseInt(k), viewport.content= "width=320, target-densitydpi=" + k ;
    }
}
renderPage();

autostrap.css

/*!
 * AutoStrap v1.0.0 (http://largesoft.org)
 * Copyright 2015 Vern, Inc.
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
}
body {line-height: 1; background-color: rgba(233,233,231,1);}
body *{
    max-width: 320px!important;
    font-family: "microsoft yahei";
}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}

/* remember to define focus styles! */
:focus {outline: 0;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse;border-spacing: 0;}
hr{margin-top: 5px;margin-bottom: 5px;border: 0;border-top: 1px dashed #eee;}

html頁面引入代碼

  <meta id="MobileViewport" name="viewport" content="width=320, initial-scale=1, maximum-scale=1, user-scalable=no" servergenerated="true">

使用

1、頁面引入autostrap.js、autostrap.css文件 2、在標簽里面加入以下代碼

<meta id=”MobileViewport” name=”viewport” content=”width=320, initial-scale=1, maximum-scale=1, user-scalable=no” servergenerated=”true”>

規范

標簽內都所以元素都大小不超過320px即可，如果有特殊動畫超過320px，將body的overflow屬性設為hidden即可

項目主頁：http://www.baiduhome.net/lib/view/home/1440560236966