在头信息中定义不能缩放
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
为了在ios上长串数字不被解析成电话号码,在头信息中增加
<meta name="format-detection" content="telephone=no" />
兼容retina高清屏,作为background-image使用的一倍图和两倍图
/* 先定义一倍图 */
.pic{
background-image:url(images/pic.jpg);
}
/* 再定义两倍图 */
@media only screen and (-webkit-min-device-pixel-ratio: 2)
{
.pic{
background-image:url(images/pic@2x.jpg);
-webkit-background-size: 600px 400px;/* 这里为一倍图的宽高 */
}
}
click事件在手机触摸屏上有延迟,所以一般使用(on)touchstart,(on)touchend替代,需要注意对(on)touchmove进行默认事件的屏蔽
function stopDefault(e) {
if (e && e.preventDefault) {
e.preventDefault();
}else{
window.event.returnValue = false;
}
return false;
}
$(document).on('touchmove', function(e) {
stopDefault(e);
});
由于手机网速原因,有时需要等所有资源加载完才能进行操作的话,使用window.onload
window.οnlοad=function(){
// do something
}
pc版网页使用 e.clientX 和 e.clientY 来获取鼠标在屏幕上的位置,
触屏版网页使用 e.targetTouches[0].clientX 和 e.targetTouches[0].clientY 来获取点击触摸的位置。
另外触屏版网页绑定多个 (on)touchstart,(on)touchend 在快速切换点击触发的时候,可能会漏掉接收触发事件