判断当前客户端是pc端还是移动端还是Ipad

最新推荐文章于 2025-07-10 10:36:59 发布

原创最新推荐文章于 2025-07-10 10:36:59 发布 · 6k 阅读

3 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

105 篇文章

订阅专栏

本文介绍了一种通过JavaScript判断客户端类型（PC、手机或平板）的方法，并据此展示不同的网页布局。利用navigator.userAgent属性来实现这一功能，从而为用户提供更佳的浏览体验。

实现手机和电脑两种不同的布局，判断手机还是电脑: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("电脑");
    }