autostrap基于原生JS的移动动端解决方案
介绍
就目前移动端而言,已有比较成熟都响应式框架,类似于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;}
评论
原生 JS 实现移动端 Picker 组件
Picker 是指提供多个选项集合供用户选择其中一项的控件。Picker 展示区域有限,部分选项会被隐藏,最好是当用户对所有选项都比较熟悉、有预期的时候,才使用 Picker。<!DOCTYPE html><html lang="en"> &...
前端精髓
0
jsproxy基于浏览器端 JS 实现的在线代理
jsproxy是一个基于浏览器端JS实现的在线代理安装curlhttps://raw.githubusercontent.com/EtherDream/jsproxy/master/i.sh|bash
jsproxy基于浏览器端 JS 实现的在线代理
0
xmpp-over-websocket基于 xmpp 的解决方案
xmpp-over-websocket的目标是提供一个实时信息基于xmpp和websocketpull或者poll的解决方案。GettingStartedClonegit库的子模块,运行通讯脚本,然后
xmpp-over-websocket基于 xmpp 的解决方案
0
SurrealDB端到端的云原生数据库
SurrealDB是一个端到端的云原生数据库,适用于Web、移动、无服务器、jamstack、后端和传统应用程序。SurrealDB通过简化数据库和API堆栈来减少现代应用程序的开发时间,消除对大多数
SurrealDB端到端的云原生数据库
0
pageshow移动端滑动切页原生 Js 插件
pageshow 是一款移动端滑动切页原生Js插件。支持IE6.0+,FF1.5+,Safari2.0+,Opera9.0+,支持极快速度切换,并可调用动画效果。
pageshow移动端滑动切页原生 Js 插件
0