移动前端的坑

先介绍一下项目环境，前端工具使用fis-plus，主要使用了zepto插件。总体架构比较简单。

  在这里咱们不讨论viewport布局（使用viewport貌似坑会少不少，可是因为条件限制，有时只能使用原始方法开发），下面进入正题：

  零、调试工具

  推荐你们在调试移动端页面时使用chrome的toggle device mode。

  

        在此模式下能够随意切换市面上的各类主流机型。不过真机与模拟环境仍是有必定差距，在后期测试阶段你将会深切地感觉到这一点，木哈哈哈。

  1、布局。

  PC端和移动端的布局的思路仍是比较不一样的。若是最初没有考虑好移动端布局的思路，在后期兼容性等完善过程当中将会超级痛苦。

  在PC端咱们很常见的一种布局思路以下：将网页主题设为固定宽度，居中，并定义最小宽度，可适配各类大小的PC端屏幕。因为PC端可视范围较大，因此上述方法可行，可是移动端彻底不一样，移动端的屏幕自己就比较小，因此咱们必须所有利用起来。移动端的页面通常来讲结构都会比较简单，下面分结构介绍两种布局：

（1）居中

  通常banner或者按钮等元素都会定义为居中布局。在ps中量好外边距后，直接给元素设置margin，如：margin: 0 10px; 无需设置宽度，元素会自动撑开，且在任何屏幕上都会有相同10px的左右外边距。

（2）多个元素水平排列

  好比上图中经常使用网址中的咨询、hao12三、图片、凤凰四个一排，怎样作到在任何移动端都可以漂亮的排列呢？很简单，将每一个元素都设置成25%的宽度并居中，就能达到上述的效果。

  比较复杂一点的，如上图中第一排的新闻、小说等图标是怎么样布局的呢？通过简单的计算，每一个元素都定义为16%的宽度，这样总共是16%*6=96%，剩下的4%再给两边的元素各加2%的外边距就ok了。

  若是你想实现更加完美的效果，好比使图片跟随手机屏幕的大小变化，则能够给图片设置相对宽度，并使高度自动伸缩，则能够达到以上效果。

2、像素

  因为如今须要多移动端使用的是retina视网膜屏幕，因此在看页面设计图时，须要按照原型图尺寸的一半进行长度赋值。这里就会引出一个十分蛋疼的问题：当设计图有1px的线条或border时，咱们该怎么办！

有人说了，iOS 8 和 OS X Yosemite 支持 0.5px 的边框。我只能说呵呵，光有两个系统是木有用的。

告诉你们一个目前来看最佳方案：

伪类 + transform

原理是把原先元素的 border 去掉，而后利用:before或者:after重作 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新作的 border 绝对定位。

.test:before {

    content: " ";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 1px;

    border-top: 1px solid #dadad9;

    -webkit-transform-origin: 0 0;

    -ms-transform-origin: 0 0;

    transform-origin: 0 0;

    -webkit-transform: scaleY(0.5);

    -ms-transform: scaleY(0.5);

    transform: scaleY(0.5);

}

在调试兼容性的过程当中可能会遇到各类麻烦，不过耐心的慢慢调试，页面必定会实现完美的1像素，你也会炼成钛合金像素眼。

3、点击事件

在移动端的点击事件中，若是使用咱们异常熟悉的click事件，确实不是一个最佳方案。由于click事件由于种种历史缘由，有300ms的延时。因此咱们可使用tap事件。

使用tap事件你能够能在开发过程当中又会遇到一个蛋疼的问题：点击穿透现象。若是页面上弹出一个dialog，而且，在肯定按钮的下一层的这个位置正好有一个绑定了点击事件的元素，那就热闹了，点击一下，能够触发两个事件。

如何避免呢？介绍两个简单的方法，一个是将tap换成click，或者在事件最后加上preventDefault();防止冒泡。

4、空div在低端安卓显示不出来问题

在开发过程当中发现了这样一个奇怪的问题：有些无内容的容器已经设置了高度与宽度，也设置了背景图，可是在安卓低端机上就是没法显示。目前解决方案自我感受很是山寨：将高度或宽度换成对应的padding，将容器撑起来。虽然山寨，可是实践验证了，这种方法很是好用。

5、外边距合并

仍是安卓的低端机上的问题，（貌似在低版本的PC端浏览器也会出现，可是不多遇到），外边距合并指的是，当两个垂直外边距相遇时，它们将造成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

这个状况下对元素使用overflow:hidden;就会消除外边距的合并，百试百灵。

6、display使用table-cell等表格布局致使页面错乱。

仍然是安卓的低端机上的问题。在开发页面过程当中我也不多使用表格布局，出现问题的状况会比较多。正常可使用inline-block,配合float:left;通常不会出现问题。

7、缓存

html5中的web storage分为localStorage与sessionStorage。

localStorage用于持久化的本地存储。若是用户不主动清空数据，数据永远不会过时。

sessionStorage用于本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问，当回话结束时，数据也随之销毁。所以，sessionStorage不是一种持久化的本地存储，仅仅是绘画级别的存储。

8、文字垂直居中

在PC端开发时，比较经常使用的方法为设置相同的height与line-height。可是在移动端，若是在某些容器中使用此类方法，你会发现文字在某些机型上跑偏了二里地。

从这个现象能够看出，移动端的浏览器对于css的解析确实没有PC端完善。原来觉得IE三兄弟（IE六、IE七、IE8）是最坑的了，没想到被移动端的无数个兄弟完爆了。

言归正传，如何解决上述问题呢？微信采用的是在须要垂直居中的容器外套一层div，使用盒模型强制将其内部容器垂直居中。具体实现可参见 http://weui.github.io/weui 微信样式库。

另外就是在input中尽可能不使用line-height，避免引发placeholder垂直位置偏移。

9、页脚元素避免使用绝对定位。

移动端页面常常会有页脚放置copyright或logo的需求，这时千万不要使用position:absolute;bottom: 20px; 这种坑爹布局。若是这个页面存在输入需求，当调起软键盘时，你定义的这个绝对位置元素就会蹦跶到软键盘上方的页面上。

可能你会以为，若是页面没有输入框，就不存在这种问题了吧。too young too naive。世界上还有一种奇葩机型，返回键是设置的在页面底部的啊！！！你只要一写绝对定位在页脚底部的布局，百分百中招啊！

因此咱们尽可能不要使用上面的那种布局，若是硬要达到距离页面底部固定高度的效果，能够动态计算页面最小高度并进行赋值~