赞
踩
在我们工作中有很多的项目是需要在移动端实现的,但是移动端和pc端是有区别的,如果某些部分还是用pc的方法去写是会出现bug的;这里就来随便说说 移动端 和 PC 端的区别;
在开发中的区别
PC端考虑的是浏览器的兼容,而 移动端需要考虑更多的是手机兼容, 比如安卓和ios以及刘海屏;
浏览器一般使用的内核是webkit 内核; 而移动端需要注意手机的型号,类别,分辨率,以及操作系统的差异;
移动端使用的触屏,操作更加丰富,使用的事件是触屏事件,而缺少的是hover事件,而 PC 端使用的鼠标来进行操作,比较单一; 而且在开发中,移动端有需要进行弹起手机键盘的处理,而 PC 端是没有的;
进行样式或者动画的时候, PC 端因为兼容的问题, 使用c3 比较少,一般使用的是js 来进行, 而移动端就没有这个问题了, 使用的是C3(简单方便效率高);
在移动端点击(click)事件是有延迟的,会有300ms的延迟, 这个原因是 当用户一次点击屏幕之后,浏览器并不能立刻判断用户是要进行双击缩放,还是想要进行单击操作。因此,iOS Safari 就等待 300 毫秒,以判断用户是否再次点击了屏幕。(所以安卓就学习了一下);然后,300 毫秒延迟就这么诞生了
在移动端的网络是一个问题,需要考虑在网络不稳定的情况下的处理,而PC端的网络一般而言是非常稳定的;
而且用户使用的时间一定是手机 大于 电脑的; 而且移动端的传感器十分齐全,而pc端不行;
移动端兼容解决问题(基础)
手机端点击出现300ms延迟问题
300ms延迟问题 : 以前是使用的插件,但是现在使用tap基础事件即可解决这个问题;
查看图片模糊或者加载太慢
原因是 devicePixelRatio的问题, 因为手机的分辨率太小,如果按照浏览器进行分辨的话,肯定是有问题的,所以可以设置 devicePixelRatio = 2 或者是 devicePixelRatio = 1.5 或者 2和3 ,具体还需要分辨一下手机的型号(部分安卓机有部分差异);
也可以使用 css 的 background-size:contain 属性来解决;
如果图片加载过慢, 可以采用懒加载 (jquer.lazyload.min.js and LazyloadImg ) 或者是压缩图片的尺寸 LazyloadImg基础教学地址 www.cnblogs.com/axl234/p/5663153.html
手机网页的放大放小
防止手机中网页放大和缩小,这点是最基本的,一般解决这个问题是添加一个,meta标签,防止放大放小
fixed定位缺陷
ios下fixed元素容易定位出错,软键盘弹出时,影响fixed元素定位
android下fixed表现要比iOS更好,软键盘弹出时,不会影响fixed元素定位
ios4下不支持position:fixed
解决方法: 可用iScroll插件解决这个问题;
定位缺陷
这个问题 pc和移动都有;定位可能会出现部分元素 乱跑(位置不对)
解决方法: 多使用em, padding,,,,
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。