移动端HTML5开发心得

1，iOS里固定中有输入或者textarea，用户在里面输入文字，触发键盘，固定容器会客显示，而不是是连续悬浮

      解决办法：http：  //dwz.cn/CrwNz

2，移动端点击时间300ms的延迟

      解决办法：zepto.js或者百度touch.js或者是fastclick.js

3，zepto的触摸问题：swipe事件在小米1等低端手机不支持基本不用zepto

4，百度的touch.js通过touch.on进行绑定事件，但是点击会遇到点透问题，也就是父级触发，子级触发

     解决办法：下载最新版触摸地址：http： //touch.code.baidu.com/通过最新API ev.originEvent.preventDefault（）;

之前有点透问题解决办法，用到touchend或者是touchstar，可以是可以，但是有没有考虑用户在有滑屏的时候刚好手指刚碰到这个按钮或者刚好在这个按钮手指离开，也就会触发这个按钮事件，所以这种方法不太合理，往往都是点击才触发的不是碰一下就让他触发。

5，选择下拉框的高问题，手机显示样式不一样，在QQ浏览器弹出的选项列表的高度跟选择一样高，在HTC手机自带的浏览器，高度设置较高的时候，不能用选项去选中需要的参数值，还有选择默认显示的第一个有底色

6，在iPod的方面，iPhone4不支持通过点击触发事件音频的JS，比如不能通过SRC的改变触发声音播放，用点击去解决。

7，移动端音频在苹果手机不支持音乐自动播放，苹果有安全机制，需要用户去手动触发才能播放音乐，也就是现在很多一屏一屏滑动项目要加个音乐图标不只是简单的让用户去关掉音乐，投机做法是用户手触发到屏幕的时候就执行ID.play（）;的JS

8，表单就不说了，比如上传按钮设背景图无效，都是通过不透明度为0来模拟的

9，很多人用到fullPage.js来实现大图滚动或者是一屏一屏的，但是在微信开发中用到这插件如果不设置锚来定义锚点，微信的公众号发布文章都带有链接参数有＃号，不加锚，就会出现滚到第二屏用户退出继续进去马上跳到第二页问题。

 解决办法：锚点：['page1'，'page2'，'page3'，'page4']，

10，推荐使用swiper.js进行开发，比较好的中文API网站是：http：//www.swiper.com.cn/能解决很多移动端问题，

11，苹果系统在滚动长页面的时候总是滚的很不爽，不利索，回弹效果，加一句代码：-webkit-overflow-scrolling：touch;

12，视频默认控制器隐藏：视频:: - webkit-media-controls-enclosure {display：none！important;}，还有就是视频在移动端可以设置第一帧画面，但是有些手机比如HTC默认是灰色背景的，解决办法无非就是弄个图盖在上面，点击的时候图消失触发play，处女座才这么干。

13，PNG图压缩很头疼，效果不好，你可以试试这个网站：https：//tinypng.com/   很多人都知道jpg可以调质量，但是不知道png也能这么压缩，效果最好的一个网站。现在出现一种质量更低的webP格式图，谷歌开发的，安卓手机测试都可以，苹果手机不行。不采用，可以了解一下。可查看智图：http：  //zhitu.tencent.com/

14，能用字体图标就用字体图标，IE6都能兼容，移动端怕啥？  http：//www.iconfont.cn/   

15，CSS3动画效果可以参考下Animate.css写的很不错：http：//daneden.github.io/animate.css/ 

       有些低端手机比较炫的效果直接有前有后，没有中间效果，手机卡出翔，不支持。

16，了解viewport.js的人，如果遇到一些手机缩放小变大，jquery就要放到viewport引用前面，还有就是meta标签，需要注意width = device-width，github地址：https：// github的.com / anatoo / viewport.js   用PX来切图移动端，PC端怎么切你移动端也跟着切，但是一般少用，视口会出现些问题，项目比较急才用

17，移动端用REM吧，别再用老掉牙的EM了;

18，苹果手机都知道手机号码会消失不见，加句代码吧：

 

     忽略邮箱识别，加句代码吧：

19，好累，先睡觉改天再补充.....

 

 

以下移动端内容来自CSDN博友牙膏整理：“ 做手机网半年遇到   的问题及解决方法 ”

 

首先，先说的是我每个项目都会用到的一个模板页，这个我遇到大大小小的坑之后定义好的一个HTML文件

 

[html]  查看普通副本

 

 

1. <！DOCTYPE html>  
2.   
3.   
4.       
5.     <！ - 宽度设置为设备实际宽度，初始化倍数为1，最小倍数为1，最大倍数为1，用户缩放为否 - >  
6.       
7.     <！ - 删除默认的苹果工具栏和菜单栏 - >  
8.       
9.     <！ - 苹果手机顶部为黑色 - >  
10.       
11.     <！ - 屏蔽浏览器自动识别数字为电话号码 - >  
12.       
13.     <！ - base.css是所有项目都会用到的底层样式 - >  
14.       
15.     <！ - content.css是每个项目所有页面都会用到的公共样式 - >  
16.       
17.     <！ - main.css为每个页面或是模块用到的一个样式文件 - >  
18.       
19.