正文

前端开发中pc端和移动端的区别

author  author  2023-04-25  503

关键词：

前端开发中PC端和移动端网站的区别，主要是：
1、PC端在开发过程中考虑的是浏览器兼容性，移动端开发中考虑的是手机兼容性问题，做移动端开发，更多考虑的是手机分辨率的自适应和不同手机操作系统的略微差异化；

2、在部分事件的处理上，移动端自然是偏向于触屏的，另外包括移动端弹出的手机键盘该如何处理，这样的问题在PC上肯定不会遇到，但在移动端，如果你没有经验，处理起来是相当麻烦的；
3、布局上，移动端开发是要做到页面布局自适应的，而PC端页面布局的比例会相对固定；
4、在动画效果处理上，PC端要考虑IE的兼容性，通常用JS做动画的通用性会好一些，但相比CSS3却牺牲了较大的性能，而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3，既简单，效率又高。
总结：以上是移动端和PC端比较突显的区别，在实际的开发应用过程中，还会有更多的差异化区别。参考技术A

布局方面：
PC端咱们最常用的就是固定宽度980px（也有960，1000,1200），然后水平居中

width:980px;margin:0 auto;

但移动端就不能这么用了，因为很多网页都是可以横屏看，也可以竖屏看；很多屏幕的分辨率不一样；
所以只要牵涉到移动端，就要牵涉到响应式（也叫自适应）；如果是只针对移动端的项目，我平时主要考虑的是320px宽到 750px宽的兼容；

js方面

这个题主你应该问的更详细一些，因为有没有canvas对js影响很大；

第一、普通移动端网页（比如手机新浪网，手机淘宝，手机百度等）
这个在js方面和PC端区别不是太大；
主要的区别在于移动端没有了鼠标悬停（onmouseover）；点击（onclick）还可以用；
多了触摸、滑动（这里我没自己写过原生的，只会用一些插件）
我常用的移动端插件：
TouchSlide 触屏滑动特效插件大话主席
Touch.js
Swiper中文网

第二、canvas相关游戏
canvas相关的html5增加了好多js，不过我不做游戏方面，所以就不多废话了；

2，兼容性方面有哪些常见的坑要避免

这个和第一个、第三个都有重复，你再问的详细些吧；

3，如何适配不同的分辨率和屏幕尺寸

我说下我常用的（有任何不对的地方请大神指正）
原来没有iPhone6和iPhone6 plus时，设计图是640px宽的，
切图的时候就按照设计图正常切图；（按照标准的话，这里切图本来应该分成两种，一种是320px宽一倍图，一种是640px宽的二倍图；然后普通屏幕用一倍图，retina视网膜屏幕用 @2x 二倍图，可是我们的设计师太懒了，只给我一个640px宽的二倍图，这里求大神指教该怎样才能符合标准）
不过最后写css的时候，不要按照640px写，要按照320px写；所有图片和所有html标签的尺寸都要减半；如果图片img在设计图上的宽度是80px，css就要

width:40px;

如果一个按钮设计图上宽100px，你的css就要

width:50px;

后来有了iPhone6和iPhone6 plus，设计师给的设计图就变成了750px，按说由“二倍”变成了“三倍”，但是我们的设计师比较懒，不愿费事，所以现在我的解决方案还是按320px宽，img和所有html标签css减半处理；

4，如何测试

我最常用的是chrome的手机模拟器；
右键-审查元素（或F12），developer tools出来后，点击左上角那个手机；

5，哪里有完整项目的开发视频可以参考

完整项目的开发视频我还没有见过，我比较喜欢在慕课网上面看一些html5和css3的知识点；
劝你有时间的话尽量接实战项目吧，别总看视频，做一个项目比看多少视频都有用；

参考技术B 回答

请稍等

1、点击率的不同一般无线端的点击率都会高于PC端的4-5倍，有些特别点的类目相差十几倍。为什么会这样？主要是因为PC端的屏幕尺寸比PC端的要大，可视范围也多很多，无线端显示的是4-6个宝贝，而PC端则可以10个宝贝左右，因此，相对于PC端来说，无线端的焦点更为集中，当然了，点击率就更高了。策略：针对这一不同点，商家们可加大无线端推广的投入力度，以提高整体的点击率和账户质量得分，以获取更优质的流量。2、访客在线时长的不同相对于PC端来说，无线端的客户在线时长肯定要长很多。至少有些年轻人还会半夜起床玩手机，刷微博逛淘宝等。策略：针对这一无线端5大不同点之一，商家们在推广投放时可选择智能化地均匀投放，同时也要关注下线的时间。通过调整时间的折扣，创造最大的直通车产出比。3、转化方式的不同相对于PC端这种左问右问才下单的形式来说，无线端更多的是静默转化。即在不询单的情况下直接在后台下单购买。策略：对于这点，商家们在设计详情页时，就要注意细节、大图、模特展示的突出。以给买家们展示最想要看到的信息。4、排名的不同一般PC端的直通车展示位比无线端要多，流量也没那么集中，因此，由于无线端展示位少，流量集中的特点，其排名靠前的点击率和下单率都会高很多。策略：在此无线端5大不同点之一的排名问题上，我们应更为关注无线端的卡位情况，尽量把排位做到首屏展示，争取更多的优化和关注。5、关键词的不同无线端关键词与PC端关键词在设置上并不完全相同，或许你这词在PC端表现很好，但在无线端不一定好。因为两边都适配的关键词也就仅有40%之少。策略：这对这一点，我们得找到无线端关键词的找词渠道，像一些系统推荐里移动包的关键词，手机端下拉词表等等，这些都是可以在里面找到适合推广的关键词。其实移动端和PC端的差别在淘宝做之前就想好了，以后一定是移动互联的世界，用户的行为习惯才是淘宝最关注，做好移动端的同时在PC端的刷量上面下点功夫，其实PC端的流量还是会有起色。

参考技术C

前端开发中PC端和移动端网站的区别，主要是：PC端在开发过程中考虑的是浏览器兼容性，移动端开发中考虑的是手机兼容性问题，做移动端开发，更多考虑的是手机分辨率的自适应和不同手机操作系统的略微差异化。

拓展：

1、PC (personal computer)，个人计算机一词源自于1981年IBM的第一部桌上型计算机型号PC，在此之前有Apple II的个人用计算机。个人计算机由硬件系统和软件系统组成，是一种能独立运行，完成特定功能的设备。硬件系统：是指计算机的物理设备如电源、主板、CPU、内存、硬盘等等。l软件系统：是指为方便使用计算机而设计的程序，软件系统包括系统软件和应用软件。系统软件指的是主要用于控制和管理计算机资源的程序，如操作系统、编译系统等。应用软件指各种可以运行在操作系统中的程序，如游戏软件、工作软件等。

2、移动依托铁通发展自己的有线宽带的同时，发展移动有线通，是移动在08年电信业重组之后与广电合作推出的一种有线宽带上网业务。移动为了和电信联通进行有线宽带服务的竞争，推出了这个业务。移动有线通是针对家庭用户或企业提供的基于双向有线网络的宽带接入服务。当然移动有线通是针对有线上网提出的，移动很早就开办了无线上网业务如：手机上网、3G上网、WLAN（WIFI)，有线通的推出也使人们多了一种上网运营商的选择。　

参考技术D 那么首先你要了解移动端web开发和PC端web开发的特点区别在哪儿？就影响前端的两个最大的特点就是——1）网络特点：PC端带宽高，网络连接相对稳定；而移动端带宽低，网络不稳定，间歇性连通。2）分辨率：PC端分辨率相对固定（1440*900）；而移动端不同手机品牌甚至同一品牌手机不同型号，分辨率差别都很大。
所以我们就先从这两个方面说。在分辨率上，首先你要了解现在web前端开发，响应式页面布局设计给我们带来的方便。其次针对PC端，我们可以使用像素（px）来做为元素宽高的单位，但是对于移动端，我们通常会使用百分比（%）来做。对了记着在头部加上这句话：<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
在加载上，移动端尤其要注意，隐形加载，按需加载等加载方式，还有尽量处理和解决重定向问题，异步加载第三方等等...（这都属于移动web前端开发的优化问题）

移动端和pc端的区别有哪些？(代码片段)

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

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

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

移动端和pc端有什么区别

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

移动端开发框架入门

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

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

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

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

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

关于移动端的前端小结

钉钉开发笔记

钉钉开发分为：1、移动客户端。2、PC端。3、服务端。三个平台的开发。1、移动端：面对钉钉手机用户和企业用户。2、同上主要面向PC端的用户和企业。3、服务端，用于用户和企业内部管理的平台方向，例如OA网站。本人主... 查看详情

webapp(web开发移动web开发)

...　　　　　　　1、移动web基础知识　　移动web开发和web开发没有本质的区别：都是使用html（html5）、css（css3）、js、以及一些相关的技术在开发　　只不过移动web开发更侧重于移动端（手机、ipad）的显示，使页面在更... 查看详情

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

前段时间写了一个简单的div拖动效果，不料昨天项目上正好需要一个相差不多的需求，就正好用上了，但是在移动端的时候却碰到了问题，拖动时候用到的三个事件：mousedown、mousemove、mouseup在移动端都不起任... 查看详情

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

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

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

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

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

酷播v4更新了，支持pc端和移动端的视频预览功能（收费预览视频功能）

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

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

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

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

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

pc端与移动端的区别

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

移动端兼容

移动端前端开发注意点第一次接触移动端开发，发现web端和移动端的差别还是很大的，我主要记录移动端的一些内容：移动端与web端在网页设计与交互方面的差别移动端注意点一些小技巧移动端的一些问题及解决方法移动端与web... 查看详情