移动端和pc端的区别

PC端与移动端的区别

pc端与移动端从兼容性、事件处理、布局、动画处理上来说有五种区别

1.从兼容方面来说，
PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核。

移动端：
① 安卓浏览器看背景图片，有些设备会模糊，原因是手机的分辨率太小
解决方案： 用2X图片来代替img标签，然后background-size: contain
② 防止手机中页面放大或缩小： 在meta中设置viewport user-scalable = no
③ 上下拉滚动条卡顿： overflow-scrolling: touch;
④ 禁止复制选中文本： user-select: none;
⑤ 长时间按住页面出现闪退：-webkit-touch-callout: none;
⑥ 动画定义3D硬件加速： transform: translate 3d(0,0,0);
⑦ formate-detection 启动或禁止自动识别页面中的电话号码，content = "yes/no"
⑧ a标签添加tel是拨号功能
⑨ 安卓手机的圆角失效： background-clip: padding-box;
⑩ 手机端300ms延迟： fastclick
① 横平时字体加粗不一致： text-size-adjust: 100%;
 
PC端：
① rgba不支持IE8 用opacity属性代替rgba设置透明度
② 图片加a标签在IE9中出现边框 解决方案： img{border: none;}
③ IE6不支持display: inline-block       设置为： display: inline
④ position : fixed 不支持IE5/IE6 
⑤ IE6，Firfox中，width = width + padding + border
⑥ min-height比兼容IE6/IE7

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

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

（

1）使用@media，条件（min-width: 768px）判断当浏览器的宽度小于768px值时，改变样式。

@media (min-width: 768px) {
  .main {
    width: 25%;
    float: left;        
  }
}
（2）.通过媒体查询选择性加载css，意思是自动探测屏幕宽度，然后加载相应的CSS文件。

<link rel="stylesheet" type="text/css"
        media="screen and (max-device-width: 400px)"
        href="tinyScreen.css" />

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

5.在框架选择中 一般pc端用jquery，移动端用zepto，因为移动端的流量还是比较重要的， 所以引入的资源或者插件，能小则小，一个30k的资源和一个80k的资源，在移动端的差别还是挺大的。而未压缩的jquery是262kb， 压缩的jquey是83kb，可见两者的差别之大。

还有在pc端以及移动端上都比较重要的一点，首屏优化问题！

好了，以上就是小编拾伍整理的关于移动端以及pc端的区别，以及解决方案，当然了，这只是一个大概的方向，要是有别的想法，欢迎广大的砖友在下方评论留言！！谢谢