主流的移动终端和移动浏览器
智能移动中断主要以智能手机和平板电脑为主，智能系统则是IOS和Android两大系统。
由于IOS和Android系统成为主流系统，因此系统自带的浏览器就成了主流的浏览器。
主流移动端浏览器包括Safari、Android Browser、Chrome和IE，其中Safari、Android Browser、Chrome都是以Webkit为内核的浏览器。
移动端和桌面端开发的差异 移动设备和PC设备的显示差异
从显示面积上看，智能手机的显示区域比PC端显示的区域要小很多。而目前大多数网站都是以PC端浏览角度进行设计，使用手机浏览PC网站会出现显示不全问题为了解决这个问题，IOS平台的Safari浏览器定义了一个名为viewport的meta标签
<meta name="viewport" content="height = [ pixel_value |device-height],width = [ pixel_value |device-width ] ,initial-scale = float_value ,minimum-scale = float_value ,maximum-scale = float_value ,user-scalable=[yes | no] ,target- densitydpi = [ dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi] "/>
这个viewport的作用是在浏览器中创建一个虚拟的窗口，而这个窗口的默认宽度为980像素。
以第一代iPhone为例，设备的物理宽度为320像素，但是在浏览器中虚拟了一个980像素的窗口，意味着如果页面的最大宽度小于960像素，则页面可以完整地显示在iPhone浏览器中，这提高了网页的可读性
在移动端和PC端的web前端开发中，事件绑定存在差异
移动设备上可以做多点触摸操作，在PC端只能使用鼠标做单一操作。
没有PC端的鼠标类事件，只有手指的触摸类事件。
页面控件设计上存在差异
PC端的用户习惯于使用鼠标操作，鼠标可以精准地操作页面并完成点击、拖放、选择等操作。
但是在移动设备上，用户更多是使用手指触摸操作，操作的精准度会降低很多，文字的选中操作也没有在PC网页中方便
前端最佳实践 HTML的最佳实践 在页面head中添加必要的meta和link信息
于智能移动设备的特殊性，因此浏览器厂商针对移动端网站添加了多个不同功能的meta和link设置。页面中添加了这些设置，用户在移动设备中有更好的用户体验
<meta name = "viewport" content = "user-scalable=no,initial-scale=1.0,maximum-scale=1.0,width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"><link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphoneretina.png"><link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipadretina.png">
<meta name="format-detection" content="telephone=yes" />
利用移动设备的便利性
<meta name="format-detection" content="telephone=yes" />
这个设置和上面设置的电话号码自动识别meta并不冲突，meta设置是控制让设备不自动识别的，而这个tel和sms类型的链接是手动添加的链接，即当关闭自动电话号码识别时，仍然可以在页面上添加tel和sms类型的链接
不要使用iframe，谨慎使用table标签
在大部分情况下，移动智能设备上很难适配table和iframe的显示，其屏幕宽度不够，要么内容被遮盖，要么就是整个布局变乱。为了提高移动平台用户的阅读体验，应尽量使用列表控件（ul、ol）代替table来显示数据
CSS最佳实践 为了提高移动平台用户的阅读体验，应尽量使用列表控件代替table来显示数据不要使用:hover伪类设置悬停效果设置合理的字体大小和行高
大部分智能移动设备的尺寸都比PC小很多，同样的字体大小，在移动设备上的阅读体验要比在PC上差。为了让网页上的内容在移动设备上更易于阅读，推荐设置的字体大小最小为16像素
4. 在不需要选中文字的区域禁用文字选中功能
在各智能移动设备的浏览器中，基本都有文字长按选中功能，这样可方便用户选中文字并进行复制、全选及粘贴等操作。这是一个很有用的功能，但在某些可点击控件或区域中，用户很容易误操作而使得页面弹出用户选中对话框
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
JS最佳实践 使用移动平台中特有的事件处理
在移动设备中由于交互方式的改变，事件处理的方式也和PC端不同了。在移动端的浏览器中，由于操作的方式主要是手势，因此添加了整套的手势触摸事件，包括touchstart、touchmove、touchend和touchcancel。
谨慎使用标准对话框，避免弹出窗口
在各个平台的浏览器中，标准对话框的外观差异较大，因此，为了在各平台浏览器中有统一的外观，建议使用模拟的对话框来代替标准对话框
谨慎使用Timer
在大部分的智能设备中，当页面处于隐藏状态（即用户点击了返回主菜单，或者打开其他应用，或者浏览器中打开了新的tab，或者智能设备屏幕关闭）时，正在浏览的页面会处于锁定状态，页面中的JavaScript代码会停止执行。
目前，大部分主流移动版浏览器都遵循了这样的设计，只有Android版的Chrome浏览器在浏览器转入后台时仍然执行JavaScript代码。在开发中需要考虑这样的情况，避免影响页面的功能
