移动端web解决方案

标签：

范畴

　　移动端web浏览器。至少需要适配的，UC,QQ,各手机内置浏览器，chrome，safari。

     是不是觉得和PC端差不多？错了！每款同一版本ios的内置浏览器一样。但每款同一版本android的不同品牌手机内置浏览器有很多细节上的差别(每个手机运营商称其为优化系统)。何况每款浏览器还有不同版本。所以移动端web的坑远多于PC端。这是它有N多辅助库的原因。

     优点是，它对CSS3，H5的支持远胜PC端。

解决方案

浅析

　　原生加载

　　　　<script>标签罗列，放body结束标签前

     模块化加载

　　　　requireJS/seaJS.   前者为AMD.后者CMD.

　　　  其实两者差不多。都用来做依赖管理。你看顺眼就用哪个吧。两者异同看这里。

          注意，如果要打包，勿用别名。

    路由

　　　　用途

　　　　　　 不刷新改变URL；通过URL渲染对应内容。

window.addEventListener( "load", function() {

    FastClick.attach( document.body );
}, false );

　　手势事件。 原因是原生  getsture事件 gesturestart、gesturemove、gestureend。 兼容问题非常严重。

　　　　　　　　　　　　   var iScroll = new IScroll(dom, {
				scrollX: true,//使用横向滚动条
				scrollY: false,//不使用纵向滚动条
				click: false,//不允许点击
				preventDefaultException: { tagName:/^(a|input)$/ }//让a input标签可点击
			
			});
			
			//在400ms内滚动到指定元素el 往左偏移10像素
			iScroll.scrollToElement(el,400,10)
			 
			 //让滚动区域内容在指定的时间内滚动到x/y的位置 scrollTo(x, y, time, relative)
			 iScroll.scrollTo(0,100,400);    //100ms内向下滚动400px。如果relative设为true，则向上。

            //屏幕小于500px时
            enquire.register("screen and (max-width:750px)", [
            //match匹配，unmatch不匹配
                { match : function() { console.log("handler 1 matched"); } },
                { match : function() { console.log("handler 2 matched"); } }
            ]);

移动端web解决方案

标签：

原文地址：http://www.cnblogs.com/mominger/p/4567467.html