H5 page example

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Red Packet Rain</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>

    illustrate:

        1. Change <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> to <meta name="viewport" content=" initial-scale=0, maximum-scale=0, user-scalable=0"> can prohibit the default maximize and zoom in and out of the mobile phone H5 page;

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=326242019&siteId=291194637