??????????? H5 ??????

??

???????????? H5 ??????????????????????????????????????????????????????????????????H5????????????

?????? UI??????????????????????????????????�??�??????????????????????????????????????????????????????????????????? iOS ???????? Android ??????????????????

??????????????????

??????? Gif ??????????????

???????????????????????touchend????

????????????????????????touchend????

????????????????????????? Android ????????????????? touchmove ?????????????????????????

??????????????????????????????

???????????????????????????????????????????????????????????

?????????????????????

?? wrapper ??

???????

???? Gif ????????? wrapper ????????????????????????????????????????????????????????????????????????

• ????
• ???????
• ??? / ????
• ?????????
• ????????????
• ????????????????
• ???????????????
• ????????????
• ????????????
  

????????????????????????????????????????????????????????????

??????????????????????????????????????????????????????????????????????????????????????????????

???????????????????????

?????????????????? body ??? touchmove ??? event.preventDefault() ???????????????????????????????body ????? touchmove ???????????????????? wrapper ???????????????????????????????????????????

?????????? Loading ???

??????????????????

?????????? H5 ?????????????????????? H5???????????????????? loading ?????????????????????????????????????????????????? loading ??????????????

????? loading ??????????

???????????? load ??  no no no??????? loading ??????????????????????

?????????????????????????? ????? Chrome ????? Network ??????

?????????????????????? 2G/3G ????????????????

????????????????11?????????????????? 2G ??? 41.4%?3G ??? 31.3%?4G ??? 27.3%??????????? WiFi ?????????????????????????? 2G/3G?????????? 2/3G ???????????????????????????? 300KB ?????????? 2~3s ??????????

????? loading ??????????

???????????????????????????????   ?????????? CSS ? JS ??????????????

?????? loading ???????????????????????    ?????????????????????????????????

??????????????

?????????????????????????????????????????????????? DOM?????????? iScroll??????????????????????????????????????????????????DOM ????????????

???????????????????????????????

?????????????????????????????????????????? translate ?????????????????????? position:absolute; left:0; top:0???????????? position:absolute; height:100% ????????????? body ???????????????????? iScroll ????

???????????????????????? PC ??????Demo????????? Chrome ????????????? iOS ? Android ????????? bounce ?????? iOS ? Android ????????????????????????JS ??????????????????Demo ??????????????????????????????????

????????????????????

???????????? H5 ?????????????? 28w ???? 800 ???????????????????????????????????? 100~200k ?????????????????????????????

?????????? Q ????????????? bug?????????????????H5 ??????????????????????? Webview ????????

??????H5 ?????? PC ????

???? H5 ???????????????????????? PC ?????????????QQ ??????????????????????????????????????????????????????????? PC ??????????? PC??????? H5 ?????

?????????????????

?????? CSS3?Canvas?SVG ???????????????????????? Android 2.3????? animtion-fill-mode ?????????????????????????? before/after ?????????? animation-timing-function: steps?????????????????????????????????????? UA ?????????

??????????????????????????????? Modernizr ??????????????

?????????????

???????????????????????????????????? REM?Media Query ? JS+CSS???????????????????????????????????H5???????????

???????????????

????? iPhone4/4s ???????????????????????????????

??????�

???????????????

• ???????????????????
• ????????font spider?fontmin?
• ?????????????Compass?
  

????????? UI ??????????????????????????????????????????? iOS ? Android ????????????????????????????????????????????????????????????????????????????

????????????????????????????????????????????????? H5 ???????????????????????????? H5 ?????Canvas?SVG ?????????????????????????????????????

???????????????14???

via???ISUX