在阿里的几次面试中,总是被问到移动端和PC端有什么区别,当时回答的时候主要是回答了在兼容性、网速、适配、页面布局等方面的不同,但是还是很不系统,所以这里做一个总结。

第一: PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更多考虑的应该是手机分辨率的适配,和不同操作系统的略微差异化。

第二: 在部分事件的处理上,移动端多出来的事件是触屏事件,而缺少的是hover事件。 另外包括移动端弹出的手机键盘的处理,这样的问题在PC端都是遇不到的。

第三: 在布局上,移动端开发一般是要做到布局自适应的,我使用的一直是rem布局,感觉很好。

第四: 在动画处理上,PC端由于要考虑IE的兼容性,所以通常使用JS做动画的通用性会更好一些,但是CSS3做了很大的牺牲, 而在手机端,如果要做一些动画、特效等,第一选择肯定是CSS3 既简单、效率又高

第五:  微信的一些接口组好能去实现一遍,熟悉一下肯定是有好处的,比如通过微信分享文章,title、description、icon等图标的配置,这些还是要会的。

第六: 百度地图的一些API接口,也得去实现一下,这些对于移动端来说,LBS是一个非常重要的特性,所以地图这块肯定是要了解的,在加上百度地图这块已经是一个比较成熟的平台了,所以学起来也比较容易。

第七: CSS3的动画一定要比较熟练,这在移动端用的还是比较多的。

第八: 一般pc端用jquery,移动端用zepto,因为移动端的流量还是比较重要的, 所以引入的资源或者插件,能小则小,一个30k的资源和一个80k的资源,在移动端的差别还是挺大的。

而未压缩的jquery是262kb, 压缩的jquey是83kb,可见两者的差别之大。

第九:最好能掌握一套完整的前端开发架构,比如模块化、打包、压缩、缓存、有条件的还可以做一下自动化测试等等,比较好用的有fis,另外,想要快速提升自己的前端开发技术,钻研前端架构这块是一个非常好的方向。

第十: 性能优化,包括首屏的打开速度、用户响应延迟、渲染性能、动画帧率等在手机上都需要特别注意。

第十一: 比如在手机上的300ms的延迟,这在PC端是没有的,如果我们希望做成webapp,那么自然就不需要这300ms的延迟,所以可以使用hammer-time.js来移除这300ms的延迟。

本文整理自:知乎

前端:移动端和PC端的区别的更多相关文章

  1. 关于移动端和PC端的交互的区别

    对于现在的移动端设备的普及,移动端上的用户体验成了一个重要的关注点. 看了一些网上的关于移动端的交互和用户体验的知识,这里总结了一些.若有不足的地方,希望大家能够积极补充. PC端和移动端的产品的设计 ...

  2. jQuery 触发事件 移动端和pc端的区别

    jQuery 触发事件 移动端和pc端的区别 <pre>mousedown event.pageXmousemove event.pageXmouseup event.pageXtouch ...

  3. 简述移动端与PC端的区别

    1.移动端与PC端的区别 PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更 ...

  4. JavaScript判断移动端及pc端访问不同的网站

    JavaScript判断移动端及pc端访问不同的网站 现在很多网站都是分为两个版本,一个pc端的一个移动端的(响应式除外),针对这两个版本,就需要对访问的设备进行判断,如果是pc,就直接访问pc网站, ...

  5. 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究

    PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...

  6. new Date(str)返回的时间结果在移动端比PC端快了8小时

    最近开发过程中,后端传过来一个“2018-03-15T17:53:19.6307928”字符串,需要将字符串转换成“2018-03-15  17:53”的格式展示出来.首先我使用了var time=n ...

  7. js判断游览器是移动端还是PC端

    js判断网页游览器是移动端还是PC端 <script type="text/javascript"> function browserRedirect() { var ...

  8. 检测当前运行环境——移动端与PC端。

    方法1: $(function checkBrowser(){ var browser={ versions:function(){ var u = navigator.userAgent, app ...

  9. 【Javascript Demo】移动端访问PC端网页时跳转到对应的移动端网页

    不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,下面是本人测试有效的方式. 1.效果图 PC ...

随机推荐

  1. PreparedStatement预编译对象实现

    模糊查询   插入 同时插入两行数据   执行更新语句 删除操作          

  2. Login failed for user 'xxx'

    今天零晨,正准备晚睡,有一网友在skype求救,意思是说,恢复专案的数据库之后,死活登录不了.出现的错误如下: Insus.NET叫他参考下面方法来做:http://www.cnblogs.com/i ...

  3. 添加节点至XML文档中去

    不管是<怎样创建XML文档> http://www.cnblogs.com/insus/p/3276944.html还是<泛型List<T>转存为XML文档> ht ...

  4. How to compile a node file?如何编译一个节点文件?

    Ubuntu16.04,ros Kinetic 最近几次遇到的问题都是,给你一个写好的ros node文件,没有给你其他的东西,你如何编译它? 以从ros中提取rgb图像和深度图像为例,示例源代码ex ...

  5. uint8_t / uint16_t / uint32_t /uint64_t 是什么数据类型

    在nesc的代码中,你会看到很多你不认识的数据类型,比如uint8_t等.咋一看,好像是个新的数据类型,不过C语言(nesc是C的扩展)里面好像没有这种数据类型啊!怎么又是u又是_t的?很多人有这样的 ...

  6. 洛谷 P2447 [SDOI2010]外星千足虫

    P2447 [SDOI2010]外星千足虫 题目描述 公元2089年6月4日,在经历了17年零3个月的漫长旅行后,“格纳格鲁一号”载人火箭返回舱终于安全着陆.此枚火箭由美国国家航空航天局(NASA)研 ...

  7. js中 关于DOM的事件操作

    一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象 ...

  8. P1114 “非常男女”计划

    题意:给你一个01串,求满足0和1总数相等的最大字串   $n\ \le\ 10^5$ 1.$O(n^3)$枚举起点终点,统计判断是否成立 2.$O(n^2)$先$O(n)$时间计算01个数的前缀和, ...

  9. 线段树 SP1043 GSS1 - Can you answer these queries I

    SP1043 GSS1 - Can you answer these queries I 题目描述 给出了序列A[1],A[2],-,A[N]. (a[i]≤15007,1≤N≤50000).查询定义 ...

  10. C++基础学习8:类的定义(class)

    先来说说C和C++中结构体的不同 a) C语言中的结构体不能为空,否则会报错(??) b) C语言中内存为空结构体分配大小为0,C++中为结构体和类分配大小为1byte c) C语言中的结构体只涉及到 ...