范畴

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

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

优点是,它对CSS3,H5的支持远胜PC端(因为PC端的主力IE在拖后腿)

解决方案

  

浅析

  原生加载

    <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,则向上。
        注意
    移动端别直接用iscroll5,它太大了。只适合阉割版 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。
    
      响应式、meta设置
    
      请看这里
 
 
 
 
 
      

  

  

  

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

  1. 移动端web页面滚动不流畅,卡顿闪烁解决方案

    移动端web页面滚动不流畅,卡顿闪烁解决方案   1.ios端的-webkit-overflow-scrolling属性可控制页面滚动效果,设置如下实现惯性滚动和弹性效果: -webkit-overf ...

  2. 移动端web常见问题解决方案

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略Android平台中对邮箱地址的识别 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对i ...

  3. 【超级干货】手机移动端WEB资源整合

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...

  4. 手机移动端WEB资源整合

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...

  5. 【前端】移动端Web开发学习笔记【1】

    下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...

  6. Diy页面服务端渲染解决方案

    1. 问题由来 在移动互联网电商领域,运营每天需要搭建多个促销页面来吸引用户去点击去购买,一开始程序员临时写个新页面去实现,可这些页面可以用几次就不用了,每次创建新页面去实现费时费力,而且,电商的运营 ...

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

    转载于:http://www.w3cfuns.com/notes/24611/fbba9cbd616e795360ea45515494aa53.html meta基础知识 H5页面窗口自动调整到设备宽 ...

  8. 编程语言 : Java的动态Web解决方案泛谈

    文章概述 最近发现很久前一股脑地学习框架,发觉越发迷糊.知道了框架只是暂时的,重点是基础的技术.该文大篇幅回顾Servlet技术栈和简要的MVC框架. 至于为什么学J2EE,额,大家都用框架,可框架也 ...

  9. 7个优秀的国内外移动端web框架(转)

    淘宝SUI Mobile框架   (light7框架 官网:http://www.light7.cn/)官网地址:http://m.sui.taobao.org/ SUI Mobile 是一套基于 F ...

随机推荐

  1. 跟着刚哥梳理java知识点——数组(七)

    数组:数组是多个相同类型数据类型的集合,实现对这些数据的统一管理. 元素:数组中的元素可以是任何数据类型,包括基本数据类型和引用类型. 特点:属于引用类型,数组型数据是对象object,数组中的每个元 ...

  2. 关于sql、mysql语句的模糊查询分类与详解,包括基本用法和mapper.xml文件里插入写法

    欢迎猿类加qq:2318645572,共同学习进步 实际例子: ssm框架:service业务层->dao层->mappers.xml->junit/test测试 1:service ...

  3. 简单c语言子集词法分析器

    概述 词法分析是编译的第一个环节,其输入是高级语言程序,输出是单词串.词法分析器的主要任务是将高级语言程序作为字符串输入,然后依据词法规则将字符串组合成单词,并输出单词串. 为了方便之后的编译环节,通 ...

  4. virtual box ubuntu 主机和虚拟机实现互相复制粘贴

    链接:http://jingyan.baidu.com/article/574c521917db806c8d9dc18c.html 常规高级里共享粘贴板已经选中双向,(我的已经可以了复制粘贴了),如果 ...

  5. MSMQ队列学习记录

    微软消息队列-MicroSoft Message Queue(MSMQ) 使用感受:简单. 一.windows安装MSMQ服务 控制面板->控制面板->所有控制面板项->程序和功能- ...

  6. Java设置Excel单元格式

    XSSFWorkbook wb = new XSSFWorkbook(); CellStyle style = wb.createCellStyle(); style.setBorderRight(C ...

  7. 闭包(匿名函数) php

    php中的闭包,之前不理解.以前项目中虽然有用到,也是别人怎么用,自己也跟着怎么用,也没具体去看一下,时间长了就忘了,也不知道闭包是怎么回事.今天网上搜集了关于php闭包相关的文章,看了7,8篇,干货 ...

  8. Swift、Objective-C 单例模式 (Singleton)

    Swift.Objective-C 单例模式 (Singleton) 本文的单例模式分为严格单例模式和不严格单例模式.单例模式要求一个类有一个实例,有公开接口可以访问这个实例.严格单例模式,要求一个类 ...

  9. Machine Learning——Supervised Learning(机器学习之监督学习)

    监督学习是指:利用一组已知类别的样本调整分类器的参数,使其达到所要求性能的过程. 我们来看一个例子:预测房价(注:本文例子取自业界大牛吴恩达老师的机器学习课程) 如下图所示:横轴表示房子的面积,单位是 ...

  10. typedef和define的详细区别

    typedef是一种在计算机编程语言中用来声明自定义数据类型,配合各种原有数据类型来达到简化编程的目的的类型定义关键字. #define是预处理指令.下面让我们一起来看. typedef是C语言语句, ...