移动端开发及兼容要点

文章目录

1. 1. 手机内置浏览器环境单一(webkit = webCore + JSCore)
2. 2. css支持程度
3. 3. 浏览器事件机制

手机内置浏览器环境单一(webkit = webCore + JSCore)

• iphone
• Android
• Nokia S60
• webOS
• linux
• windows(webkit 发展较晚)

css支持程度

• flexBox布局【兼容性写法】:

   <div class="flex-parent">
     <div class="flex-son"></div>
     <div class="flex-son"></div>
     <div class="flex-son"></div>
   </div>
  .flex-parent {
        /*设置父元素为伸缩容器*/
        display: -webkit-box; /*老版本：iOS 6-, Safari 3.1-6*/
        display: -webkit-flex; /*新版本：Chrome*/
        display: flex; /*标准规范：Opera 12.1, Firefox 20+*/
        /*设置父元素内部的伸缩子元素项目换行规则：水平排列（row）不换行（nowrap）*/
        -webkit-box-orient: horizontal; /*老版本：iOS 6-, Safari 3.1-6*/
        -webkit-flex-flow: row nowrap; /*新版本：Chrome*/
        flex-flow: row nowrap; /*标准规范：Opera 12.1, Firefox 20+*/
      }
  .flex-son {
        /*设置子元素伸缩项目的伸缩比例*/
        -webkit-box-flex: 1; /*老版本：iOS 6-, Safari 3.1-6*/
        -webkit-flex: 1; /*新版本：Chrome*/
        flex: 1; /*标准规范：Opera 12.1, Firefox 20+*/
        /*此处无需设置宽度，因为flexbox会自动伸缩*/
        height: 2rem;
        margin: 0 0.5rem;
        background: #000;
      }

flex参考w3c官方标准

• css3

  我们可以把移动设备分为低端系统(IE9、android2.1~3.0、ios3.2)和高端系统(ios4+、 android4.1~4.2)，
  针对低端系统，采用普通方案，并使用hack兼容
  针对高端系统，可以采用更丰富更炫酷的效果

浏览器事件机制

• 这个得专门开一篇博客来研究

参考cnblog的整理资料