移动前端开发和 Web 前端开发的区别是什么？

发布网友 发布时间：2022-03-03 12:40

我来回答

共3个回答

热心网友 时间：2022-03-03 14:10

移动前端开发和web前端开发都属于前端开发，具体有以下区别。

1、业务的应用场景

web前端开发主要指传统的PC端网页开发，页面主要是运行在PC端浏览器中，移动前端开发出来的页面主要是运行在手机上。

直观上会感觉，PC端页面大一些，移动端页面小一些，但是根据开发经验，页面大可并不代表书写的代码复杂，页面小也并不意味着开发简单，难与易主要还是取决于具体的业务需求。

2、新技术的使用

由于在移动端主要以webkit内核为主，对于HTML5等新技术支持的更好，所以可以更大范围的使用新技术，而PC端开发由于很多场景下要求兼容IE等老版本浏览器，出于浏览器兼容性的考虑，有些情况下*了新技术的使用。

3、页面的适配性

传统PC端的页面开发一般都会选择给页面设定一个固定宽度，两侧有留白，但是移动端的页面由于其载体手机屏幕比PC要小很多，一般都会选择尽可能多的在手机屏幕上显示内容，这就要求移动端页面要能够充分适应各种屏幕尺寸的手机并进行最大程度的利用。

从这一点上来说移动端页面的适配难度更高一些。

4、页面的性能

PC端的网络情况一般比较稳定，都是通过网线或者Wi-Fi连接网络，但是移动端就比较复杂，除了Wi-Fi，还有2G、3G、4G甚至是在几种不同的网络连接中交替切换也经常发生。

不稳定的网络连接对页面性能带来的挑战是移动端的页面资源不能太大，否则在恶劣网络情况下时，页面将会无法访问 ，严重影响用户体验。

5、框架选型

由于移动端网络情况的不稳定，导致我们在移动端页面框架选型时，一般只考虑小而美的框架，例如像zepto.js这样的压缩之后只有9.6K，就能满足一般业务的需要，如果是想要构建更复杂的单页面应用，可以选择像vue.js这样的框架，功能强大，但体积压缩后却只有20多K。

而web端相对选择的范围就比较大，一些比较重型的框架也可以根据项目需求加以考虑，例如古老但庞大的ext.js，依然凭借着众多UI组件活跃在一些企业的后台管理系统项目中。

热心网友 时间：2022-03-03 15:28

1，普通pc端开发与移动端开发区别。
先说背景，我大言不惭的说一下，我pc端的前端开发干了有快4年多，不算大牛，也算一个标准的前端开发工程师吧，可怜的是我2015年之前做过的移动端项目不超过1个。。所以几乎经验为零。我对这个神秘又被炒的火热的名字迷惑了很久，移动前端开发工程师，h5前端开发工程师，native前端开发工程师，Hybrid前端开发工程师，卧槽感觉屌屌的有木有啊。。
所以我在15年决定弃坑了（pc的代码实在写腻歪了。。），投身到专属的移动开发中，业余时间也做过phonegap，也知道和了解过一些h5+native开发的方式，下面就慢慢给大家【科普】一下。。说错了别喷。
普通pc端开发，我理解就是你拿电脑打开的网页都算【这不是废话么】。
那么移动端前端开发工程师，说白了就很好理解了，做手机网页的前端开发工程师。
这么一比，是不是感觉，移动端开发简单多了？
没错，我转了之后发现还真是呢。。。【还有点小激动】
pc，我们需要考虑什么呢？有点开发经验的同学都知道，ie6-11，firefox，chrome，safari都得兼容的吧。哪个都够你吃一壶的，无论是css还是js。
mobile的网页开发，我们需要考虑什么呢？
就目前来说，我们只需要考虑webkit内核的浏览器和chrome，uc，qq，小米手机浏览器就好了。。。【后面特意会说这几只国产浏览器哪里屌了】
相比较而言，除了经验是0以外，需要兼容的东西还是少了，少了，少了呢。
ok，单纯说pc和移动端开发的区别，其实也就是这个，可以简单的概括来说，mobile端的网页开发比pc端的网页开发，更简单一些。【页面小了啊，装的东西少了，css和html写的少了吧】交互简单一些【滑动，触屏，手势，平时看看手机你还能有啥特殊操作？】
so，别被这玩意吓坏了，根据我的经验来看，pc端的前端开发程序员，转mobile开发，一点问题没有，而且上手会很快。
够直白的解释了。
2，移动端web app开发与套壳开发区别。
移动端web app，移动端网页，Hybrid开发【我喜欢叫套壳开发工程师……】，无所谓叫什么，移动端开发无疑就是这3种了。下面一一解释下我的理解。
移动端web app是什么呢？简单理解就是页面头部加入了下面这一句话的东西：

<meta name="apple-mobile-web-app-capable" content="yes">

这个meta的作用是让普通移动网页被添加到主屏幕后，拥有一些类native的功能，很多同学应该都很熟悉了。就是类似隐藏ios的上下状态栏，实现全屏，禁止弹性拖拽，全屏，修改顶部颜色等。
我理解这种模式的网页为web app，当然还有一种类型就是大家平时都访问的那些网站，比如手机taobao，手机美团，手机微博的网页版，大家打开的时候，不是全屏的，但是用起来，开发者把它们伪装的很像这种web app的交互体验而已。
以上2种我觉得可以总结为web app。而不是普通的移动端网页，如果想看移动端网页，可以参考手机新浪网，手机网页，手机腾讯新闻，手机凤凰，是很好的对比。
之后我来说下套壳的吧。这部分如果没有开发过phonegap或者类似和native连调过webview的同学，可能觉得很陌生，其实不是，这种套壳开发和开发普通的网页没什么区别，只不过资源大部分是file开头的，本地资源，网络资源分为使用js异步接口获取和native获取，再和js的接*互，类似ios中，可以直接在oc或者swift可以直接在webview中执行js，android同理，但是js想调用native功能怎么办呢？
我们这边的做法是有一个负责通讯的iframe，我们通过修改这个iframe的url，来让native来监控一系列特殊的url地址请求，再在native中调用对应的功能，比如摄像头，特殊交互，呼起，或者提供接口数据。数据的提供方式类似jsonp的原理，在执行函数的参数中传回来。
理解了这块，其实做套壳的比做普通web app和网页都简单，因为在native的webview中是可以指定是什么版本的webview，用什么内核，拥有什么等级的安全权限等等，ios和android做法不一样，但是原理一致，对于前端开发工程师来说是无差的。
而且套壳开发还有个好处就是，因为资源是本地化的，所以可以使用比较重的框架，如angular，react，一些三方框架，因为最终都是通过和native代码*发布的。
套壳native的静态前端部分的更新，我们可以使用远程下载静态资源包的方法实现，不发布大版本而修改webview中逻辑的需求，这一点也是大部分公司选择一半native一半h5来开发的原因。都知道ios审核发版很慢。
这些就是我知道的一些很通俗的区别了，技术细节就不说了，太多。大家有个概念就好啦。

热心网友 时间：2022-03-03 17:02

其实都一样！ 最大的区别是使用场景不一样！
因为都是浏览器解释HTML+CSS+JS代码 不存在语法不同 唯一不同是交互 不管是用VUE还是什么
技术上讲真的 都一样， 没有区别