快捷導(dǎo)航

前端判斷頁面是在PC端還是移動(dòng)端打開四種方法

更新時(shí)間：2024年10月12日 08:58:36 作者：VT.饅頭

本文介紹幾種在前端開發(fā)中用于判斷用戶設(shè)備類型（PC端或移動(dòng)端）的方法,包括使用navigator.userAgent、媒體查詢、第三方庫detect.js和Vue框架插件vue-device-detect,這些方法有助于在開發(fā)中處理設(shè)備適配和頁面權(quán)限問題,需要的朋友可以參考下

前言

在寫前端的過程中，有時(shí)候考慮適配與頁面權(quán)限等問題的時(shí)候，需要涉及到用戶訪問的設(shè)備情況，下面將介紹幾種常見的判斷頁面是在PC端還是移動(dòng)端打開的方法。

方法1. 基于 navigator.userAgent 的方法

這種方法是通過檢查瀏覽器的 navigator.userAgent 字符串來判斷設(shè)備類型。雖然這種方法不是非常精確（因?yàn)?nbsp;userAgent 可以被篡改），但對(duì)于大多數(shù)情況來說是足夠的。

示例代碼

function isMobile() {
    const userAgentInfo = navigator.userAgent;
    const mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
     const mobileFlag = mobileAgents.some((mobileAgent) => {
        return userAgentInfo.indexOf(mobileAgent) > 0;
    });

    return mobileFlag;
}

console.log(isMobile() ? '移動(dòng)端' : 'PC端');

方法2. 使用媒體查詢

媒體查詢是 CSS3 提供的一種方法，可以根據(jù)不同的設(shè)備特性應(yīng)用不同的樣式規(guī)則。通過 JavaScript，你可以監(jiān)聽窗口大小的變化來判斷設(shè)備類型。

示例代碼

function checkDeviceType() {
    const isMobile = window.matchMedia('(max-width: 768px)').matches; // 768px 是一個(gè)常見的平板設(shè)備寬度
    console.log(isMobile ? '移動(dòng)端' : 'PC端');
}

// 初始檢測(cè)
checkDeviceType();

// 監(jiān)聽窗口大小變化
window.addEventListener('resize', checkDeviceType);

方法3. 使用第三方庫

有些第三方庫提供了更復(fù)雜的設(shè)備檢測(cè)功能，例如 detect.js。這些庫通常會(huì)提供更詳細(xì)的設(shè)備信息。

示例代碼

首先安裝 detect.js:

npm install detect.js

然后在你的代碼中使用：

import detect from 'detect.js';

function isMobile() {
    return detect.device.type === 'phone' || detect.device.type === 'tablet';
}

console.log(isMobile() ? '移動(dòng)端' : 'PC端');

方法4. 使用框架提供的工具

如果你使用的是像 Vue.js 這樣的框架，可能會(huì)有社區(qū)提供的插件來幫助你檢測(cè)設(shè)備類型。例如，在 Vue 中，你可以使用 vue-device-detect 插件。

示例代碼

首先安裝 vue-device-detect:

npm install vue-device-detect

然后在你的 Vue 組件中使用：

import { device } from 'vue-device-detect';

export default {
  mounted() {
    console.log(device.isMobile ? '移動(dòng)端' : 'PC端');
  }
}

注意事項(xiàng)

兼容性和準(zhǔn)確性：userAgent 的檢測(cè)方法可能不夠準(zhǔn)確，因?yàn)橛脩舸砜梢员淮鄹摹?/li>
響應(yīng)式設(shè)計(jì)：現(xiàn)代 Web 設(shè)計(jì)傾向于采用響應(yīng)式布局，而不是依賴于設(shè)備檢測(cè)。
性能影響：頻繁地檢測(cè)設(shè)備類型可能會(huì)對(duì)性能產(chǎn)生影響，尤其是在移動(dòng)設(shè)備上。

在實(shí)際應(yīng)用中，通常建議使用響應(yīng)式設(shè)計(jì)來適應(yīng)不同設(shè)備，而不是顯式地檢測(cè)設(shè)備類型。然而，在某些特定場景下，如需要加載不同資源或提供不同的用戶體驗(yàn)時(shí)，設(shè)備檢測(cè)仍然是有用的。

附：前端移動(dòng)端和PC端的區(qū)別

在阿里的幾次面試中，總是被問到移動(dòng)端和PC端有什么區(qū)別，當(dāng)時(shí)回答的時(shí)候主要是回答了在兼容性、網(wǎng)速、適配、頁面布局等方面的不同，但是還是很不系統(tǒng)，所以這里做一個(gè)總結(jié)。

第一： PC考慮的是瀏覽器的兼容性，而移動(dòng)端開發(fā)考慮的更多的是手機(jī)兼容性，因?yàn)?strong>目前不管是android手機(jī)還是ios手機(jī)，一般瀏覽器使用的都是webkit內(nèi)核，所以說做移動(dòng)端開發(fā)，更多考慮的應(yīng)該是手機(jī)分辨率的適配，和不同操作系統(tǒng)的略微差異化。

第二：在部分事件的處理上，移動(dòng)端多出來的事件是觸屏事件，而缺少的是hover事件。另外包括移動(dòng)端彈出的手機(jī)鍵盤的處理，這樣的問題在PC端都是遇不到的。

第三：在布局上，移動(dòng)端開發(fā)一般是要做到布局自適應(yīng)的，我使用的一直是rem布局，感覺很好。

第四：在動(dòng)畫處理上，PC端由于要考慮IE的兼容性，所以通常使用JS做動(dòng)畫的通用性會(huì)更好一些，但是CSS3做了很大的犧牲，而在手機(jī)端，如果要做一些動(dòng)畫、特效等，第一選擇肯定是CSS3， 既簡單、效率又高。

第五：微信的一些接口組好能去實(shí)現(xiàn)一遍，熟悉一下肯定是有好處的，比如通過微信分享文章，title、description、icon等圖標(biāo)的配置，這些還是要會(huì)的。

第六：百度地圖的一些API接口，也得去實(shí)現(xiàn)一下，這些對(duì)于移動(dòng)端來說，LBS是一個(gè)非常重要的特性，所以地圖這塊肯定是要了解的，在加上百度地圖這塊已經(jīng)是一個(gè)比較成熟的平臺(tái)了，所以學(xué)起來也比較容易。

第七： CSS3的動(dòng)畫一定要比較熟練，這在移動(dòng)端用的還是比較多的。

第八：一般pc端用jquery，移動(dòng)端用zepto，因?yàn)橐苿?dòng)端的流量還是比較重要的，所以引入的資源或者插件，能小則小，一個(gè)30k的資源和一個(gè)80k的資源，在移動(dòng)端的差別還是挺大的。