不知不觉，我已经做移动端开发半年了。从开始接触移动开发，到现在对细节的完善。期间也走了很多坑！为什么要经历那么多坑？可能我身边做前端开发的朋友比较少，也没有一个想找人一起研究技术的。还加了一些前端群，大部分都是废话聊天群。没办法，只能自己努力学习了！跟大家分享一下，我半年来做移动开发的一些心得，还有一些需要注意的地方！1、关于单位的使用，相信只要是做过移动端开发的人，或者是刚入门的新手朋友，最纠结的问题就是“字体”单位的选择！为什么这么说？可能在传统的PC端，1px=1px的比例。移动端就不是这样了，1px=?。因为有像素密度这种东西，移动端不能用“PX”这个单位。可能在你的大屏手机上1px等于1点，但在你的小屏手机上可能恰到好处。就像网页的兼容性一样，浏览器的内核不同，分析当然也会不同！恰逢其时，CSS3给了你一个新单位“rem”。如果有对rem不是很了解的朋友，可以看看这篇文章：《Web app变革之rem》。当然，如果出现这样的问题，首先我们就要问神奇的“百度”了。网上不是流传着这样一个笑话吗：“有事找度娘，没事找度娘！”好吧，我又邪恶了！回到正题，大部分网友给出的答案是：“html根元素的字体大小设置font-size:62.5%，然后使用rem单元就可以很好的解决这个问题！”这样设置后：你会得到一个转换比率值：1rem=10px;如果我们想将“h1”标签的字体大小设置为20px。我们直接设置为rem就可以了！代码如下：html{font-size:62.5%;}h1{fon-size:2rem}==>h1{fon-size:20px}二、布局相信不用我多说关于布局，按照正常网页布局即可，一般设计师给的效果图都是640*960的。我们就按照320的比例来做，也就是宽度减半。可能之前大部分人都和我一样，字体使用单位“rem”。其他人仍然使用px的单位。好的！最近，严格的UI设计师发现了这个问题。你为什么不配我这里的效果图呢！....好的！本来想偷工减料的人是这样写的。不可能。既然严查了，就得想办法了！（可能之前没太注意这些细节，就这么拖着）暂时找到了合适的方案，既解决了字体单位的问题，又兼容了单位的问题像素，但转换很麻烦！例如：我们要设置一个宽度为60px的框。换算为rem单位：60/2/20=1.5rem；前提是我们需要在head中加入如下代码：PS：渲染的实际像素是60px，在手机上是30px，换算成rem单位时除以20。html{font-size:20px;}@mediaonlyscreenand(min-width:401px){html{font-size:25px!important;}}@mediaonlyscreenand(min-width:428px){html{font-size:26.75px!重要；}}@mediaonlyscreenand（最小宽度：481px）{html{字体大小：30px！重要；}}@mediaonlyscreenand（最小宽度：569px）{html{字体大小：35px！重要；}}@mediaonlyscreenand(min-width:641px){html{font-size:40px!important;}}可能有更好的解决方案，但是我暂时还没有找到更好的解决方案...3.细节可能会处理细节来解决兼容性让我们谈谈性吧！还好手机上没有弹出IE，基本都是webkit内核和IOS自带的浏览器。1.禁止手机自动识别和android邮箱自动识别
2.使用sansserif字体body{font-family:"HelveticaNeue",Helvetica,STHeiTi,sans-serif;}iOS4.0+使用英文字体HelveticaNeue，之前iOS版本降级使用Helvetica。中文字体设置为ChineseHeiTiSTHeiTi。需要补充的是，iOS字体库中不存在中文黑体，但系统会自动兼容中文黑体STHeiTi***系统默认中文字体Heiti-Simplified或Heiti-TraditionalHeitiSCLightHeiti-SimplifiedThin(iOS7后废弃）HeitiSCMediumHeiti-简体中文BlackHeitiTCLightHeiti-繁体ThinHeitiTCMediumHeiti-繁体中文Hei原生Android4.0版本下中文字体和英文字体均选择默认无衬线字体。***DroidSansFallback4.0之后，中英文字体都将使用原生Android新的Roboto字体。其他第三方Android系统也选择默认的sansserif字体3.禁止选择文本html,body{-webkit-user-select:none;/*禁止选择文本（如果没有选择文本的要求，这个是必须的选项）*/用户选择：无；}4。禁止长按链接和图片弹出菜单a,img{-webkit-touch-callout:none;/*禁止长按链接和图片弹出菜单*/}5.去掉A连接的input标签，点击显示阴影样式a，输入{-webkit-tap-highlight-color:rgba(0,0,0,0);/*iosandroid去除带有自己阴影的样式*/}6.屏蔽阴影：-webkit-外观：无；可以同时屏蔽输入框怪异的内阴影，解决iOS下无法修改按钮样式的问题，测试还发现了一个小问题，添加以上属性后，iOS还是有圆角默认情况下，但可以使用border-radius属性对其进行修改。7.点击延迟点击事件要等待双击确认，会有300ms的延迟，体验不是很好。大多数开发人员会使用封装的点击事件而不是点击事件。所谓tap事件是由touchstart事件+touchmove判断+touchend事件封装组成。8、手机拍照上传图片HTML5模板代码：点击下载。又一次觉得一个人苦苦钻研太累，没有方向。做研究和测试可能会浪费很多时间，但其中也有一些乐趣！这是学习和成长的好方法。
