autostrap基于原生JS的移動(dòng)動(dòng)端解決方案

介紹

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

原理

目前我們熟悉的開源前端框架都是柵格化布局，通過mediaQuery，在不同分辨率加載不同的css到達(dá)響應(yīng)式的效果。同時(shí)還提供了諸多的JS組件供開發(fā)者使用。而AutoStrap是使用viewport，以iPhone4分辨率為模板，根據(jù)可視寬高調(diào)節(jié)縮放比例實(shí)現(xiàn)。具體內(nèi)容下面的代碼會給出。

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;}