前端开发移动端注意事项

其实web端和移动端的差别是很大的,接下来我为大家介绍一下移动端开发的一些注意事项

移动端前端开发注意点

在web端是尽可能地展示丰富的功能，并且较为复杂，一个页面可以包含很多的内容。当然在交互方面也是相对复杂些，一般不是直接把“下一步”放在用户面前，而是让用户自己去找。
而移动端设计应以简约为主,一个页面可能只有一个功能，并且操作起来一定要便捷。代码量不能太大，不然加载起来速度会比较慢。

移动端注意点

1、浏览器兼容问题
由于移动端的浏览器大多数都是基于webkit内核的，因此对css3和html5的支持都比较好。所以大家可以放心的用了。这里推荐一个网站，可以验证兼容性的，感觉很好用：can I use.

2、移动端的特殊设计
移动端的设计都遵循着一些规则，比如，一般app的底部导航栏的高度都跟微信公众平台的底部菜单栏高度一致，为45px。
一般提交按钮或者其他标签与屏幕的边距一致，并且不随屏幕大小的变化而变化。
因为手机的配置不够高，所以尽量减少代码量，尤其是css，简约的设计加流畅的速度，一举两得。

3、运用display:flex
弹性盒模型在布局上是非常灵活、便捷的，而且大大减少了代码量。
在web端上flexbox支持IE10+,safari6.1+,支持chrome,opera以及firefox，记得加前缀。
关于flexbox的相关知识可以查看flex语法篇、详解弹性盒模型。
之前我发现display:flex在微信浏览器和qq浏览器不兼容。微信浏览器用的是qq浏览器的内核，支持旧版的弹性盒模型。可以使用dispaly:box，当然前面要加-webkit-和-moz-的前缀。关于旧版的请见文章：旧版弹性盒模型。

4、box-sizing的妙用
box-sizing真是救世主般的存在。
有时候明明设置了宽度、高度，可突然发现后面需要加padding、border了，可是我想保持总的宽度和高度怎么办？这个时候box-sizing就可以发挥妙用了。box-sizing:border-box，这下padding和border都可以被算到width里了。如果还想按照原来的，那就设置为content-box就行了。

5、单位
一般web端使用px，但移动端一般多会采用em和rem，让单位成为一个不是固定数值的而是一个比例。
这方面可以多看看文章。
6、图片
不用换的作为背景的图片那就直接用background:url();另外还可以设置是否repeat，以及background-size和background-position等。
但是要换的图片一定不能放在css里面，不然就改不了了。

7、touch事件
可以直接参考jquery mobile。
在js中其实就是这几个事件而已：
touchstart: //手指放到屏幕上时触发

touchmove: //手指在屏幕上滑动式触发

touchend: //手指离开屏幕时触发

touchcancel: //系统取消touch事件的时候触发，这个好像比较少用

每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表

touches: //当前屏幕上所有手指的列表

targetTouches: //当前dom元素上手指的列表，尽量使用这个代替touches

changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches

这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：
clientX / clientY: //触摸点相对浏览器窗口的位置
pageX / pageY: //触摸点相对于页面的位置
screenX / screenY: //触摸点相对于屏幕的位置
identifier: //touch对象的ID
target: //当前的DOM元素
这里引用了别人写的，加个链接：JS移动客户端–触屏滑动事件。
但是在touch事件里也发现了一些问题。
     其它一些优化要点与传统PC端网站优化一样。如网站结构要用合理的树形结构，最好采用树形和扁平相结合;清晰的面包屑导航，方便搜索引擎爬行抓取和用户体验;title写法要尽量包含关键字，首页、频道页、内容页写法要有所侧重。