一个热爱网络的年轻人的博客
很多新手朋友经常在群里问，需要移动端手机上幻灯片图片轮播js特效源码。因为我们有同事已经写好了轮播js模块，我每次都是直接调用代码，没怎么写过，所以也帮不上忙。最近手头不忙就自己琢磨着写了swipeSlide玩玩。swipeSlide使用是原生js来处理touch事件，还特别加入Zepto或jQuery的支持，使这个插件可以更灵活，让大家有更好的选择。
自从昨天用了新买的Macbook Pro后，感觉整个互联网网页都模糊了。。。不过还是有一些大型网站对Retina屏幕对了优化处理，由衷感谢各位前端工程师们。
之前在《移动端网页制作入门之二：移动端与PC端间的不同特性》就提到，手机里看图片会模糊，当时提供了两种最常见、简单的办法。这里拓展下，把一些大型网站使用的方法都罗列下。
移动端里对悬浮效果支持不是很好。例如PC端里很常见的页面滚动到一定距离，导航悬浮效果，页面scroll的时候计算滚动条和顶部距离，加fixed就可以了。但移动端里，基本上所有手机，页面滚动的时候，任何js都不会执行。所以手机里这个效果，得等到页面停止滚动，导航才会悬浮。
网页布局里很多地方需要宽高等比缩放功能，例如手机网页的全屏轮播。轮播的宽度随着手机不同分辨率而变化，高度自适应，这样才不会让轮播里面的图片压缩变形，顶多就是放太大而变模糊。
PC端大部份是用px单位，小部分用em单位，而移动端，请全部用rem单位吧。目前大部份设备，包括但不限于iOS 5+、Android 2.3+、Window Phone 8+都是可以兼容的，具体兼容表请看caniuse。
支持img标签图片懒加载、div标签（或者其他标签）的背景图片懒加载；
支持预加载。默认是图片出现在屏幕时开始加载，可以设置threshold参数，如threshold:100，此时图片出现在屏幕之前100px时开始加载；
背景图片懒加载时，自动添加base64的1*1透明图片做默认背景图。也可以自定义默认背景图，参数为placeholder。
请允许我一上来就泼盆冷水。不知道是谁说的：搞移动端吧，移动端是webkit的天下，没有IE6，兼容性简单多了。话虽这样说，但未免太乐观了。我Android的UC浏览器到现在，怎么清除缓存，有个页面的某部分始终没有样式加载，我都想卸载了。。。很少人兼容Windows Phone，我一直在做兼容，也是一堆坑。手机端依旧有兼容性，只是一般不会去写hack而已。
我最近利用Grunt+Less等技术，做了个集合Less自动编译CSS、自动编译source map、自动刷新浏览器、快捷打包代码、压缩CSS等功能的一个内部工具。因为Grunt里的Less不满足我们生成source map的规则，所以我同事把less.js给改了。这样就导致无法从官方npm下载包了，我只好把修改的包提交到npm里。因为众所周知的原因，我测试下载npm包，一下午都没下载成功。最后别人提示我在cnpm里下载，我一直以为cnpm会很慢同步，没想到他们效率真高，早就同步好了。大赞！
在手机浏览器里打开一个网页，如果没经过优化，你会发现，网页会占满整个屏幕，而且文字都很小。这对手机用户是非常不好的体验，这里涉及到的知识叫viewport。加上这个meta标签后，页面就会按照手机的屏幕来适配了。
很高兴在公司争取了半年，终于从后台页面转到移动端了。想想还有定兴奋呢！本周已经在投入全部精力开发微信页面，跟传统页面有相似处，也有不同点，以后有机会再聊。
初步的野心有点大，想把自己学习的经历一点点的写出来，让自己和他人都可以从中有所收获，希望自己可以坚持更新这个系列。