移动平台网页开发笔记-CSDN博客

本文链接：https://blog.csdn.net/guoerwei/article/details/6822406

1、限制网页最小宽度，使用缩放手势不能再把界面缩小。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

如果要完全禁止页面的缩放

<meta name="viewport" content="user-scalable=no, width=device-width" />

2、根据不同宽度调用不同的CSS。

<link rel="stylesheet" type="text/css" href="test.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" href="test2.css" media="screen and (min-width: 481px)" />

第一段表示为宽度<=480时，调用的CSS

第二段表示为宽度>=481时，调用的CSS

以I9100为例，竖屏时调用第一段CSS，横屏时调用第二段CSS，经测试，似乎2段CSS并不是预先加载，也就是说翻转手机后，可能一段时间内仍然是旧的CSS，载入完成后才换过去。

也可以写在style里

<style type="text/css" media="only screen and (max-width: 480px)">
body{ background:#090;}
</style>
<style type="text/css" media="screen and (min-width: 481px)">
body{ background:#960;}
</style>

3、试验ontouchstart ontouchmove ontouchend，写一个拖动的小东西

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
</head>
<body>
<div id="haha" style="width:300px; height:300px; background:#666; position:absolute; left:0; top:0;">
	asdfas
</div>
<input type="number" id="x" style="position:absolute; left:0; top:400px;" />
<input type="number" id="y" style="position:absolute; left:0; top:450px;" />
</body>
</html>

~function(){
	var _=this, dom = document.getElementById("haha"), x=document.getElementById("x"), y=document.getElementById("y"), dom_loc=[], e_loc=[];
	_.start_touch = function(e){
		var touches = e.touches[0];
		dom_loc = [dom.offsetLeft, dom.offsetTop];
		e_loc = [touches.clientX, touches.clientY];
		x.value = e_loc[0];
		y.value = e_loc[1];
		document.addEventListener("touchmove", _.move_touch, false);
		document.addEventListener("touchend", _.end_touch, false);
		e.preventDefault();
	};
	_.move_touch = function(e){
		var touches = e.touches[0], now_loc = [touches.clientX, touches.clientY];
		dom.style.left = now_loc[0] - e_loc[0] +dom_loc[0] + "px";
		dom.style.top = now_loc[1] - e_loc[1] +dom_loc[1] + "px";
		e.preventDefault();
	};
	_.end_touch = function(e){
		document.removeEventListener("touchmove", _.move_touch, false);
		document.removeEventListener("touchend", _.end_touch, false);
		e.preventDefault();
	};
	dom.addEventListener("touchstart", _.start_touch, false);
}();