移动端网页开发

 

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

 

　　移动端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开发有个大致的了解，然后在实际开发工作中不断积累。