实现手机和电脑两种不同的布局,判断手机还是电脑:window.onload一个页面只能有一个
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>练习</title>
</head>
<body>
<div class="web">
<table cellpadding="0" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</div>
<div class="mobile">
<div style="width: 100px;height: 100px;background: red;margin-bottom: 10px;">1</div>
<div style="width: 100px;height: 100px;background: red;">2</div>
</div>
<script>
window.onload=function(){
isPc();
}
function isPc(){
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
/*window.location.href="你的手机版地址";*/
var div1 = document.getElementsByClassName('mobile')[0].children[0];
div1.style.display = "none";
}
else {
/*window.location.href="你的电脑版地址"; */
var div2 = document.getElementsByClassName('mobile')[0].children[1];
div2.style.display = "none";
}
}
</script>
</body>
</html>