H5页面例子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>红包雨</title>
	

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<meta name="msapplication-tap-highlight" content="no" />

	<style>
		body{ margin:0; padding:0; font-size:1em; font-family: 'microsoft yahei',Verdana,Arial,Helvetica,sans-serif;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none; }
		.redRain{ width:100%; height:100%; padding:0; margin:0;}

		.test{margin:0 auto; width:250px; height:30px; text-align:center;}
		
		
		
		.timerBox{ position:relative; width:100%; display:bolck;}
		.timerBox .input{margin:0 auto; width:250px; height:30px;}
	
	</style>
</head>
<body>
	<div class="redRain">
		<div class="test">注册</div>
		<div class="test">LOG</div>
	
		<div class="w timerBox">
			<div class="input">手机号：<input name="userName" type="text" /></div>
            <div class="input">手机号：<input name="userName" type="text" /></div>
            <div class="input">手机号：<input name="userName" type="text" /></div>
            <div class="input">手机号：<input name="userName" type="text" /></div>
            <div class="input">手机号：<input name="userName" type="text" /></div>
            <div class="input">手机号：<input name="userName" type="text" /></div>
            <div class="input">手机号：<input name="userName" type="text" /></div>
            <div class="input">手机号：<input name="userName" type="text" /></div>
            <div class="input">手机号：<input name="userName" type="text" /></div>
            <div class="input">手机号：<input name="userName" type="text" /></div>
            <div class="input">手机号：<input name="userName" type="text" /></div>
            <div class="input">手机号：<input name="userName" type="text" /></div>
		</div>
	</div>
</body>
</html>

说明：

1、将<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">修改为<meta name="viewport" content="initial-scale=0, maximum-scale=0, user-scalable=0">就可以禁止手机H5页面默认最大化和放大缩小；

猜你喜欢