移动端开发的注意事项

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

 

首先咱们先说一下pc端和移动端的不一样。

一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，由于目前无论是android手机仍是ios手机，通常浏览器使用的都是webkit内核，因此说作移动端开发，更多考虑的应该是手机分辨率的适配，和不一样操做系统的略微差别化。

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

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

四： 在动画处理上，PC端因为要考虑IE的兼容性，因此一般使用JS作动画的通用性会更好一些，可是CSS3作了很大的牺牲， 而在手机端，若是要作一些动画、特效等，第一选择确定是CSS3， 既简单、效率又高。

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

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

7、通常PC端用jquery，移动端用zepto，由于移动端的流量仍是比较重要的，因此引入的资源或者插件，能小则小，一个30k的资源和一个80k的资源，在移动端的差异仍是挺大的。未压缩的jquery是262kb，压缩的jquey是83kb。未压缩的zepto是54kb，压缩的zepto只有9kb。

 

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

1、布局。

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

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

（1）居中

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

（2）多个元素水平排列

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

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

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

2、HTML5标签的使用

在开始编写webapp时，建议前端工程师使用HTML5，而放弃HTML4，由于HTML5能够实现一些HTML4中没法实现的丰富的WEB应用程序的体验，能够减小开发者不少的工做量，固然了你决定使用HTML5前，必定要对此很是熟悉，要知道HTML5的新标签的做用。好比定义一块内容或文章区域可以使用section标签，定义导航条或选项卡能够直接使用nav标签等等。 

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

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

4、自适应布局模式

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

5、学会使用webkit-box

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

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

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

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

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

fastclick能够解决在手机上点击事件的300ms延迟
zepto的touch模块，tap事件也是为了解决在click的延迟问题
触摸事件的响应顺序
一、ontouchstart 
二、ontouchmove 
三、ontouchend 
四、onclick
解决300ms延迟的问题，也能够经过绑定ontouchstart事件，加快对事件的响应

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

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

 

  9、文字垂直居中

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

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

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

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

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

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

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

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