移动端和pc端的区别

PC端与移动端的区别

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

1.从兼容方面来说

，

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

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

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

（

1）使SEO靠我用@media，条件（min-width: 768px）判断当浏览器的宽度小于768px值时，改变样式。@media (min-width: 768px) {.main {width: 25%;floSEO靠我at: left; } } （2）.通过媒体查询选择性加载css，意思是自动探测屏幕宽度，然后加载相应的CSS文件。<link rel="stylesheet" typSEO靠我e="text/css"media="screen and (max-device-width: 400px)"href="tinyScreen.css" />

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

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

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

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