移动端开发的注意事项

　　在互联网营销的时代下，大部分企业除了自己的官网之外，也有建设手机网站，在移动用户比PC端用户多的情况下，企业又该如何去优化手机网站呢？其实手机网站建设都有一系列的注意事项，那么手机网站建设过程中注意事项都包含什么呢？下面让我们一起来看看吧！

首先我们先说一下pc端和移动端的不同。

一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。

二： 在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是hover事件。 另外包括移动端弹出的手机键盘的处理，这样的问题在PC端都是遇不到的。 

三： 在布局上，移动端开发一般是要做到布局自适应的，我使用的一直是rem布局，感觉很好。

四： 在动画处理上，PC端由于要考虑IE的兼容性，所以通常使用JS做动画的通用性会更好一些，但是CSS3做了很大的牺牲， 而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3， 既简单、效率又高。

五：  微信的一些接口组好能去实现一遍，熟悉一下肯定是有好处的，比如通过微信分享文章，title、description、icon等图标的配置，这些还是要会的。

 六： 百度地图的一些API接口，也得去实现一下，这些对于移动端来说，LBS是一个非常重要的特性，所以地图这块肯定是要了解的，在加上百度地图这块已经是一个比较成熟的平台了，所以学起来也比较容易。

七、一般PC端用jquery，移动端用zepto，因为移动端的流量还是比较重要的，所以引入的资源或者插件，能小则小，一个30k的资源和一个80k的资源，在移动端的差别还是挺大的。未压缩的jquery是262kb，压缩的jquey是83kb。未压缩的zepto是54kb，压缩的zepto只有9kb。

好吧，我们下面再具体说几样PC端应该注意的地方。

一、布局。

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

  在PC端我们很常见的一种布局思路如下：将网页主题设为固定宽度，居中，并定义最小宽度，可适配各种大小的PC端屏幕。由于PC端可视范围较大，所以上述方法可行，但是移动端完全不同，移动端的屏幕本身就比较小，所以我们必须全部利用起来。移动端的页面一般来说结构都会比较简单，下面分结构介绍两种布局：

（1）居中

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

（2）多个元素水平排列

　　如果有四个元素需要水平排列，怎样做到在任何移动端都能够漂亮的排列呢？很简单，将每个元素都设置成25%的宽度并居中，就能达到上述的效果。

  比较复杂一点的，如果是六个元素呢？经过简单的计算，每个元素都定义为16%的宽度，这样总共是16%*6=96%，剩下的4%再给两边的元素各加2%的外边距就ok了。

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

二、HTML5标签的使用

在开始编写webapp时，建议前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。 

三、放弃CSS float属性，使用flax布局

在项目开发过程中可以会遇到内容排列显示的布局，假如你遇见这样的视觉稿，建议你放弃float，可以直接使用display:inline-block。或者使用flax布局。

四、自适应布局模式

在编写CSS时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。为达到适配各种手持设备，我建议前端工程师使用自适应布局模式（支付宝采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示，你无需再次考虑设备的分辨率。

五、学会使用webkit-box

上一节，我们说过自适应布局模式，有些同学可能会问：如何在移动设备上做到完全自适应呢？很感谢webkit为display属性提供了一个webkit-box的值，它可以帮助前端工程师做到盒子模型灵活控制。

 六、如何解决盒子边框溢出

当你指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式-webkit-box-sizing:border-box;用来指定该盒子的大小，包括边框的宽度。

 七、移动端click屏幕产生200-300 ms的延迟响应

移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。它的解决方案有：

fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块，tap事件也是为了解决在click的延迟问题
触摸事件的响应顺序
1、ontouchstart 
2、ontouchmove 
3、ontouchend 
4、onclick
解决300ms延迟的问题，也可以通过绑定ontouchstart事件，加快对事件的响应

八、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩。

 

 九、文字垂直居中

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

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

言归正传，如何解决上述问题呢？微信采用的是在需要垂直居中的容器外套一层div，使用盒模型强制将其内部容器垂直居中。 

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

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

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

大概就是这么一些，更多的东西在不同的环境下要求也会不同，等待着你去开发和完善，希望我的文章对你有帮助。

欢迎楼下就坐，点赞加关注哟！