前端:移动端和pc端的区别

WayneZhu WayneZhu     2022-08-29     747

关键词:

  在阿里的几次面试中,总是被问到移动端和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端的区别有哪些?(代码片段)

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

前端如何优雅的实现跨终端开发(pc端+移动端)(代码片段)

文章目录解决方案一:使用CSS媒体查询。解决方案二:写两套代码,分别应用于PC端和移动端。推荐方案:使用CabloyJS相关链接解决方案一:使用CSS媒体查询。这是传统的解决方案。使用一套代码,先做PC端... 查看详情

swiper移动端和pc端的常用解决方案

参考技术A1.利用watchSlidesVisibility和[clickedIndex]制作宽度超出后自动适应的导航2.pc鼠标/方向键控制轮播行为3.mousewheelForceToAxis可用html5页面html:同上4.对imag的操作中具有lazyLoading的功能5.loop功能(类似产品展示)6.zoomToggle.是否允许双... 查看详情

移动端和pc端有什么区别

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

js实现一个可以兼容pc端和移动端的div拖动效果(代码片段)

...要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown、mousemove、mouseup在移动端都不起任何作用。毕竟移动端是没有鼠标的,查资料后发现,在移... 查看详情

酷播v4更新了,支持pc端和移动端的视频预览功能(收费预览视频功能)

感觉要变天了,灰蒙蒙的。好久没有下雨了...[酷播V4]永久免费的酷播V4,更新了html5和flash播放器的优先级选项,效果:效果演示:http://www.cuplayer.com/CuPlayer/demos/basic/playerCrossV5/index.html免费下载:http://52player.89525.com/VideoPlayer/2016/1... 查看详情

vuejs自定义指令实现移动端和pc端的div随意拖拽。(代码片段)

在Vue里提倡操作虚拟dom尽量不操作真实是dom。但在频繁操作dom的情况下显然体验不好,使用Js操作真实dom来实现div的随意拖拽。这里为了复用,写成了指令,方便其他页面使用,直接调指令,不需要重复写。pc... 查看详情

pc端与移动端的区别

移动设备和PC本身有区别:  1、屏幕尺寸不同,屏幕大小导致显示的内容页不一样。  2、网络速度不同:手机分2G、3G、4G、WIFI等,我们要少用图片,JS、动画等等,用户打不开一样起不了作用。  3、使用习惯不同:按钮... 查看详情

移动端开发框架入门

移动端框架和传统框架的区别:移动框架在于快速开发一下项目,而手机端和pc端的适配主要是靠bootstrap来做的 zepto和mobile比较适合,在移动端有很多触摸事件,而在pc端则是很多的点击事件这些另外针对移动端的设备,比如... 查看详情

前端里移动端到底比pc端多哪些知识?

前端里移动端到底比pc端多哪些知识,为啥面试时好多公司都问h5水平如何? 我做过几年的web前端开发,就简单谈谈自己的感受吧。首先来看看PC端和移动端在前端开发上的一些区别:(1)PC考虑的是浏览器兼容性,移动端开... 查看详情

关于移动端的前端小结

<meta>标签开发移动端项目需要使用视口标签<meta>来禁止缩放,页面显示时文字就不会变小了:  这是移动端屏幕适配问题解决过程中会遇到的一环(布局便是另一环):1、谷歌浏览器使用手机模式调试时,手机... 查看详情

前端入门教程---从0开始手把手教你学习pc端和移动端页面开发第10章有路网pc端主页实战整合(代码片段)

本教程案例在线演示有路网PC端有路网移动端免费配套视频教程免费配套视频教程教程配套源码资源教程配套源码资源制作有路网首页有路网首页布局框架制作划分区域,确定div测量各个区域的宽高使用Flexbox对网页进行布局youlu-... 查看详情

前端入门教程---从0开始手把手教你学习pc端和移动端页面开发第10章有路网pc端主页实战整合(代码片段)

本教程案例在线演示有路网PC端有路网移动端免费配套视频教程免费配套视频教程教程配套源码资源教程配套源码资源制作有路网首页有路网首页布局框架制作划分区域,确定div测量各个区域的宽高使用Flexbox对网页进行布局youlu-... 查看详情

前端入门教程---从0开始手把手教你学习pc端和移动端页面开发第9章flexbox实战有路网(代码片段)

本教程案例在线演示有路网PC端有路网移动端免费配套视频教程免费配套视频教程教程配套源码资源教程配套源码资源制作有路网水平导航菜单category-nav.css.red-navheight:38px;background-color:#d80000;width:100%;.red-navuldisplay:flex;width:1200px;marg... 查看详情

html+css+js实现春节倒计时效果(移动端和pc端)

...总结前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一... 查看详情

前端里移动端到底比pc端多哪些知识,为啥面试时好多公司都问h5

我做过几年的web前端开发,就简单谈谈自己的感受吧。首先来看看PC端和移动端在前端开发上的一些区别:(1)PC考虑的是浏览器兼容性,移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览... 查看详情

SQL Server 后端和 Access 前端 - 与 SQL Server 本机客户端的 ODBC 连接失败

】SQLServer后端和Access前端-与SQLServer本机客户端的ODBC连接失败【英文标题】:SQLServerbackendandAccessfrontend-ODBCConnectiontoSQLServernativeclientfailed【发布时间】:2014-03-1813:36:46【问题描述】:我有一个SQLServer2008数据库作为后端,Access作为... 查看详情

webapp(web开发移动web开发)

  总结:移动端适配方案        或者直接做响应式页面,让pc端和移动端的界面排版不一样          1、移动web基础知识  移动web开发和web开发没有本质的区别:都是使用html(html5)、css(css3)... 查看详情