移动端web解决方案

范畴

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

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

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

解决方案

  

浅析

  原生加载

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

模块化加载

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

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

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

路由

    用途

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

实现原理

       HTML4 hash方法    #aaa ---> 改变hash ---> 监听hashchange ---> 页面前进后退时触发 ---> 渲染页面

     HTML5 state方法    pushState 改变URL(一般也是加hash) ---> 监听popstate事件 ---> 页面前进后退时触发 ---> 渲染页面

    不支持hashchange事件怎么办? setTimeout/setInterval 10ms扫描hash的变化。

H5 state 老手机不支持怎么办?优雅降级为 H4 hash写法。 兼容不好怎么不好?同样只能用定时扫描。

    Backbone的路由也是基于此原理实现。由History、Router两对象构成。

fastclick.js

    原因

      click事件有300ms延迟。touchstart/touchend在滚动时会触发。(老版zepto/jquery.mobile 的tap事件也会透视)。

    分析

  为什么click事件有300ms延迟呢? 

在B元素上有半透明红色遮盖层A,黄色B元素内有可点击链接C。点击A,touchstart等执行,A消失。300ms后,执行B click事件。

实现原理

      延迟问题:注销原生的click事件。在touchstart,touchend事件后,通过坐标判断是否为类click事件,抛出自定义的类click事件。

透视问题:通过e.preventDefault()阻止浏览器的默认处理

注意

      meta设置了user-scalable=no或者 touch-action css属性(仅IE10支持),click就不会有延迟。fastclick也会对此判断。

用法

      

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

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

  hammer.js 

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

iscroll5.js

   原因

    滚动不流畅(IOS已做了优化,如-webkit-overflow-scrolling: touch;);没有滚动条;在fixed和滚动条结合出现的诡异问题。 

    用法

    

               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,则向上。

注意

    移动端适合 iscroll-lite.js。(压缩后5K左右)它仅支持基本的滚动。如滚动到某元素。需要处理滚动事件,还需要添加onScroll事件进去。

  animate.css

    原理

      css3过渡、动画

    用法

      添加它提供的class 样式。自己再添加class/id去调整样式

举例

      

  enquire.js

    原理

      利用了原生的matchMedia()方法,处理JS的响应式布局

    用法

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

      

 zepto

     DOM库,推荐它的原因是它比jquery.mobile小。基本采用HTML5,CSS3原因。

     注意:它的自定义事件仅支持DOM。原因是它是创建类事件Event,再dispatchEvent。

     可以看我对其源码的分析。 

    

      

  

  

  

时间: 2024-12-25 04:33:43

移动端web解决方案的相关文章

前端编程提高之旅(十八)----移动端web流行交互技术方案研究

   在停止实习后,生活最大变化在于没有项目的压力,可以根据兴趣场景,探索技术实现.这个过程对于个人来说,动力自内而外,需求自上而下,都由个人把握.    生活在移动互联网井喷的今天,同时又关注前端技术,平常对微信端流行的交互(或者说玩法)有着特殊的敏感性.如果说之前接触MVC框架还是对单页面网站.CSS3前沿特效有一个概念的话,微信朋友圈及好友分享网页,则把国内网页构建的流行趋势,从幕后推向前台.    乐帝通过研究移动端web流行交互,构建起了一个初步可行的技术方案,用来实现单页面与DOM动

移动端web开发常见问题

上一篇总结了一些有关html5和css3的面试题,这一篇是有关于移动端web开发的常见问题,希望一样对你有一些帮助. Meta相关 1. 添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕后再点击进行启动时,可隐藏地址栏(从浏览器跳转或输入链接进入并没有此效果) <meta name="a

手机移动端web前端常见问题整理

移动端常见问题及解决方案 一.meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection&

移动端web框架(HTML5手机框架)

淘宝SUI Mobile框架 官网地址:http://m.sui.taobao.org/ SUI Mobile 是一套基于 Framework7 开发的UI库.它非常轻量.精美,只需要引入我们的CDN文件就可以使用,并且能兼容到 iOS 6.0+ 和 Android 4.0+,非常适合开发跨平台Web App. 轻量的UI库 SUI Mobile 非常轻量,核心库压缩Gzip后的JS.CSS网络传输体积总共只有52K,却提供了20+个常用的组件. 对于只有HTML&CSS的组件,你只需要复制HT

移动端web适配屏幕方案总结

基础知识点 设备像素:设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点. iPhone5的物理像素是640X1136. PS:在普通屏幕下,1个css像素对应1个物理像素(1:1).        在超高像素密度屏幕(Retina显示屏)下,1个css像素对应4个物理像素(1:4).(这里指专指苹果超高清屏幕)        因此,在移动端方面就需要设置dpr来保证超高清屏显示图片不会失真. 逻辑像素( logical p

手机移动端WEB资源整合

meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content=&

移动端web资源

meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content=&

【超级干货】手机移动端WEB资源整合:转载

转载于:http://www.w3cfuns.com/notes/24611/fbba9cbd616e795360ea45515494aa53.html meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略Android平台中对邮箱地址的识别 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari 将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式 viewport模板 viewport模板——通用

移动端web开发技巧(转)

原文链接:http://liujinkai.com/2015/06/06/mobile-web-skill/ 移动端web开发技巧 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我们站在潮头上. META相关 1. 添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕后再点击进行启动时,