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

Posted 2023-04-25

前端开发中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端和移动端的方法之一

window.mobileCheck = function() { 

     var check = false; 

     (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera); 

     return check; 
     }