hybrid

hybrid是什么，为何使用hybrid?

• 介绍一下hybrid更新和上线流程?

  hybrid和h5的区别?

  前端js和客户端如何通信?

移动web开发与传统pc开发的区别

• 跑在手机端的web页面(h5页面)
• 跨平台
• 基于webview
• 告别IE拥抱webkit
• 更高的适配和性能要求

什么是移动web

• ios, android; 2G,3G,4G; h5; viewport,hybrid;

移动web调试

• alert()
• firebug

• chrome dev tools调试

  移动web适配(响应式布局)

• (media query)媒体查询和flex

• 定高，宽度百分比

• viewport和流式布局

• rem原理和适配方法

  viewport

• 什么是css像素和物理像素?

  • 物理像素是屏幕实际拥有的像素点，而css像素是逻辑上的，比如放大页面就是让css像素承载更多的物理像素点;

• Layout viewport（布局视窗），Visual viewport（物理视窗），Ideal viewport （理想视窗）

  • 物理视窗:可以看到的区域
  • 布局视窗:css布局区域

  • 理想视窗

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maxinum-scale=1.0,user-scalable=0">

    • 手机打开pc端的页面为什么会等比例缩放?
    • 浏览器将页面的内容缩放至可视区内;
    • 设备的宽高和viewport有什么关系?

    • 如何使用meta标签设置viewport?

    • flex有哪些参数？

    • flex-direction

    • flex-wrap

    • flex-flow

    • justify-content

    • align-items

    • align-content

    • order

    • flex-grow

    • flex-shrink

    • flex-basis

    • flex

    • align-self

    • 什么是流式布局?

    • 页面元素的宽度变化，但是整体布局不变;

    • 什么是自适应布局?

    • 页面元素的大小不变，但是位置发生变化;

    • 什么是响应式布局?

    • 页面元素的位置和大小都会变化;

    • 什么是媒体查询?

    • 媒体类型: screen,print;

    • 媒体特性: max-width,max-height;

      移动web适配

    • rem

    • 大小由html的font-size的大小决定;

    • js改变font-size来实现适配的效果;

    • vw

    • 1vw=视窗宽度的1%;

    • vh

    • 1vh=视窗高的的1%;

    • vmax

    • max(vw, vh)

    • vmin

    • min(vw, vh)

      touch事件

    • touchstart

    • touchmove

    • touchend

    • touchcancel: touch事件非正常结束时触发

    • touches: 当前屏幕上所有触摸点的列表;

    • targettouches: 当前对象上所有触摸点的列表;

    • changedtouches: 涉及当前(引发)事件的触摸点的列表;

    • 300ms延迟

    • 用来判断双击和单击，300内是双击

    • meta标签

    • tap组件（fastclick,react-top）[touchstart, touchend]

    • 点击穿透

    • click和touch不要混用

    • 通过一个例子来区分一下触摸事件中的这三个属性：

    • 用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。

    • 用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点为一个值。当两个手指触摸相同元素时， targetTouches和touches的值相同，否则targetTouches 只有一个值。changedTouches此时只有一个值， 为第二个手指的触摸点，因为第二个手指是引发事件的原因

    • 用两个手指同时接触屏幕，此时changedTouches有两个值，每一个手指的触摸点都有一个值

    • 手指滑动时，三个值都会发生变化

    • 一个手指离开屏幕，touches和targetTouches中对应的元素会同时移除，而changedTouches仍然会存在元素。

    • 手指都离开屏幕之后，touches和targetTouches中将不会再有值，changedTouches还会有一个值， 此值为最后一个离开屏幕的手指的接触点。

    • 触点坐标选取 touchstart和touchmove使用: e.targetTouches[0].pageX 或 (jquery)e.originalEvent.targetTouches[0].pageX touchend使用: e.changedTouches[0].pageX 或 (jquery)e.originalEvent.changedTouches[0].pageX

    • touchmove事件对象的获取 想要在touchmove:function(e,参数一)加一个参数，结果直接使用e.preventDefault()就会 e 报错，处理方法为使用arguments[0]获取event参数

      touchmove:function(e,参数一){
      　　var e=arguments[0]
      　　e.preventDefault()
      }