实现手机和电脑两种不同的布局，判断手机还是电脑: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>
判断当前客户端是pc端还是移动端还是Ipad
var os = function () {var ua = navigator.userAgent,isWindowsPhone = /(?:Windows Phone)/.test(ua),isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,isAndroid = /(?:Android)/.test(ua),isFireFox = /(?:Firefox)/.test(ua),isChrome = /(?:Chrome|CriOS)/.test(ua),isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),isPhone = /(?:iPhone)/.test(ua) && !isTablet,isPc = !isPhone && !isAndroid && !isSymbian;return {isTablet: isTablet,isPhone: isPhone,isAndroid: isAndroid,isPc: isPc};}();if (os.isAndroid || os.isPhone) {console.log("手机");} else if (os.isTablet) {console.log("平板");} else if (os.isPc) {console.log("电脑");}
