用if else来判断,给<script>设置一个ID,再根据setAttribute改变src的属性。
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/ 兼容iphone4/4s /
class{}
}
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/ 兼容iphone5 /
class{}
}
分辨率可以从显示分辨率与图像分辨率两个方向来分类。
显示分辨率(屏幕分辨率)是屏幕图像的精密度,是指显示器所能显示的像素有多少。由于屏幕上的点、线和面都是由像素组成的,显示器可显示的像素越多,画面就越精细,同样的屏幕区域内能显示的信息也越多,所以分辨率是个非常重要的性能指标之一。
可以把整个图像想象成是一个大型的棋盘,而分辨率的表示方式就是所有经线和纬线交叉点的数目。显示分辨率一定的情况下,显示屏越小图像越清晰,反之,显示屏大小固定时,显示分辨率越高图像越清晰。
图像分辨率则是单位英寸中所包含的像素点数,其定义更趋近于分辨率本身的定义。
移动端触屏滑动的效果其实就是轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成。但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。
以下是四种touch事件touchstart: //手指放到屏幕上时触发touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发,这个好像比较少用
每个触摸事件被触发后,会生成一个event对象,event对象里额外包括以下三个触摸列表
ouches: //当前屏幕上所有手指的列表targetTouches: //当前dom元素上手指的列表,尽量使用这个代替toucheschangedTouches: //涉及当前事件的手指的列表,尽量使用这个代替touches
这些列表里的每次触摸由touch对象组成,touch对象里包含着触摸信息,主要属性如下:
clientX / clientY: //触摸点相对浏览器窗口的位置
pageX / pageY: //触摸点相对于页面的位置
screenX / screenY: //触摸点相对于屏幕的位置
identifier: //touch对象的ID
target: //当前的DOM元素注意:
手指在滑动整个屏幕时,会影响浏览器的行为,比如滚动和缩放。所以在调用touch事件时,要注意禁止缩放和滚动。
1禁止缩放通过meta元标签来设置。
<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">2禁止滚动preventDefault是阻止默认行为,touch事件的默认行为就是滚动。
eventpreventDefault();案例:下面给出一个案例,需在移动设备上才能看出效果。
1定义touchstart的事件处理函数,并绑定事件:
if(!!selftouch) selfslideraddEventListener('touchstart',selfevents,false);//定义touchstart的事件处理函数
start:function(event){var touch = eventtargetTouches[0]; //touches数组对象获得屏幕上所有的touch,取第一个touch
startPos = {x:touchpageX,y:touchpageY,time:+new Date}; //取第一个touch的坐标值
isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动
thisslideraddEventListener('touchmove',this,false);
thisslideraddEventListener('touchend',this,false);
},
触发touchstart事件后,会产生一个event对象,event对象里包括触摸列表,获得屏幕上的第一个touch,并记下其pageX,pageY的坐标。定义一个变量标记滚动的方向。此时绑定touchmove,touchend事件。
2定义手指在屏幕上移动的事件,定义touchmove函数。
//移动
move:function(event){//当屏幕有多个touch或者页面被缩放过,就不执行move *** 作
if(eventtargetToucheslength > 1 || eventscale && eventscale !== 1) return;
var touch = eventtargetTouches[0];
endPos = {x:touchpageX - startPosx,y:touchpageY - startPosy};
isScrolling = Mathabs(endPosx) < Mathabs(endPosy) 1:0; //isScrolling为1时,表示纵向滑动,0为横向滑动
if(isScrolling === 0){
eventpreventDefault(); //阻止触摸事件的默认行为,即阻止滚屏
thissliderclassName = 'cnt';
thissliderstyleleft = -thisindex600 + endPosx + 'px';
}
},
同样首先阻止页面的滚屏行为,touchmove触发后,会生成一个event对象,在event对象中获取touches触屏列表,取得第一个touch,并记下pageX,pageY的坐标,算出差值,得出手指滑动的偏移量,使当前DOM元素滑动。
3定义手指从屏幕上拿起的事件,定义touchend函数。
//滑动释放
end:function(event){var duration = +new Date - startPostime; //滑动的持续时间
if(isScrolling === 0){ //当为水平滚动时
thisicon[thisindex]className = '';
if(Number(duration) > 10){
//判断是左移还是右移,当偏移量大于10时执行
if(endPosx > 10){
if(thisindex !== 0) thisindex -= 1;
}else if(endPosx < -10){
if(thisindex !== thisiconlength-1) thisindex += 1;
}
}
thisicon[thisindex]className = 'curr';
thissliderclassName = 'cnt f-anim';
thissliderstyleleft = -thisindex600 + 'px';
}
//解绑事件
thissliderremoveEventListener('touchmove',this,false);
thissliderremoveEventListener('touchend',this,false);
},
手指离开屏幕后,所执行的函数。这里先判断手指停留屏幕上的时间,如果时间太短,则不执行该函数。再判断手指是左滑动还是右滑动,分别执行不同的 *** 作。最后很重要的一点是移除touchmove,touchend绑定事件。
以上就是关于帮写一个css3或者js,判断4S,iphone5以及1080p的手机屏幕分辨率,加载不同的css全部的内容,包括:帮写一个css3或者js,判断4S,iphone5以及1080p的手机屏幕分辨率,加载不同的css、如何js实现触屏点击事件、等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)