近年来，随着智能手机的普及，移动端开发受到了异常的关注。从传统的安卓、IOS原生手机系统应用开发，转向了移动端Web开发或者是混合开发，既然有需求，那就让我们一起来学习移动端Web开发吧。本文旨在让读者以最快的时间了解移动Web开发基础以及介绍一些常见问题。

首先我们要有HTML/HTML5、CSS/CSS3基础知识（会简单的切图就可以了） ，如果能懂点JS那就更好啦。

其次我们要清楚一些基本概念，不然出去吹牛逼听不懂别人说的东西或者自己说出来是非常明显的错误就很尴尬啦，为了能自信满满的吹水，我们来了解下面几个基本概念吧。

移动端网页开发 在移动端表现良好的页面，如新浪网，腾讯新闻网，手机凤凰这些网站页面在移动端也有不错的表现。

移动端web app开发 简单来说就是在开发中使用一些浏览器私有的方法，使得web页面拥有一些native的功能。或者更多的是如手机taobao，手机美团，手机微博等类似web app，他们没有很明显的使用一些native功能，但是交互、设计的和app类似的网页，它是要依托浏览器来查看的。当然近期行业内还推出了多种形式的类app/webapp应用技术，比如大家熟知的微信小程序、谷歌推出的PWA（获得与安卓原生应用同等权限）、DCloud公司推出的流应用（获得W3C及国内手机厂商支持）等。

hybrid app开发 也叫【套壳开发】，简单来说就是通过写特定的代码生成跨平台的web app，类似react native，phonegap，cocos2d等。可以用一些前端native开发框架或者是在移动端网页的基础上打包生成app。

基本概念有了，最后我们要有一张基于移动端尺寸的设计稿，比如750px，720px，640px等都可以。比如下面这张图。接下来我们就来实现这个移动端页面。

HTML示例

html代码中最关键的就是meta标签设置，开发移动端页面首先一定要设置viewport

当然这只是一种方案，其次是一些辅助优化功能，常用的有如下meta标签：

CSS示例

css中，关键点一是重置样式和PC端有点不同，二是css的数值应该是设计稿中的一半，以750px为例（因为最常见的iPhone6的屏幕尺寸为375px，设计稿是手机屏幕的两倍大小，所以css中的数值按设计稿一半计算）

最终效果

细心的我们发现，目前的实现在iPhone6下是很友好的，但是在其他设备上，比如小屏的iPhone4或者类型更多的安卓手机，表现并不是很好。这时我们会去搜索移动端适配解决方案，有js+rem的方式，也有淘宝Flexible的解决方案，我们应该去了解并实践咯。 传送门： 移动web适配利器-rem 使用Flexible实现手淘H5页面的终端适配

优势： 移动端开发的优势简单来说就是兼容性更好了，基本上只需要针对webkit内核的浏览器做兼容就好了，而且本身这类浏览器对html5、css3的兼容性就比较高，所以PC端不太敢用的属性就大胆的用起来吧。 移动端还可以使用很多设备接口来实现更好的交互效果，比如陀螺仪实现类似3D VR效果，多指操作实现图片缩放旋转，获取地理位置等。

劣势： 移动端目前设备类型特别多，移动端的适配比较难处理，移动端的事件也是一个难题，比如tap延迟，点击穿透等问题。

要想处理好移动Web开发，我们还需要很多知识储备，很多问题需要找到比较好的解决方案，下面列举一些常见问题及可供学习的资料。 1.设备视口及像素比 2.浅谈移动Web开发（上）：深入概念 3.移动端自适应方案 4.移动端 Web 开发前端知识整理 5.移动端事件介绍

本文主要介绍了如何快速切入到移动Web开发，并介绍了开发中可能会遇到的常见问题，虽然没有具体介绍，因为这不是本文的主要目的，目的是希望读者在阅读之后对移动Web开发有个大致的了解，然后在实际开发工作中不断积累。 本文介绍方式是根据我自己的学习方式来描述的，先实现一个DEMO，获得一点成就感之后才有勇气面对开发中无数的坑嘛！希望对大家有帮助！