编写手机页面的相关注意事项 杂记 分类： javascript html 手机版网页 触屏版网页 2014-08-12 11:30 212人阅读 评论(2) 收藏

在头信息中定义不能缩放

<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.onload=function(){
  	// do something
}

pc版网页使用 e.clientX 和 e.clientY 来获取鼠标在屏幕上的位置，

触屏版网页使用 e.targetTouches[0].clientX 和 e.targetTouches[0].clientY 来获取点击触摸的位置。

另外触屏版网页绑定多个 (on)touchstart，(on)touchend 在快速切换点击触发的时候，可能会漏掉接收触发事件

版权声明：本文为博主原创文章，未经博主允许不得转载。