前端判斷頁面是在PC端還是移動端打開四種方法

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

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

前言

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

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

這種方法是通過檢查瀏覽器的 navigator.userAgent 字符串來判斷設備類型。雖然這種方法不是非常精確（因為 userAgent 可以被篡改），但對于大多數(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() ? '移動端' : 'PC端');

方法2. 使用媒體查詢

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

示例代碼

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

// 初始檢測
checkDeviceType();

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

方法3. 使用第三方庫

有些第三方庫提供了更復雜的設備檢測功能，例如 detect.js。這些庫通常會提供更詳細的設備信息。

示例代碼

首先安裝 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() ? '移動端' : 'PC端');

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

如果你使用的是像 Vue.js 這樣的框架，可能會有社區(qū)提供的插件來幫助你檢測設備類型。例如，在 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 ? '移動端' : 'PC端');
  }
}

注意事項

兼容性和準確性：userAgent 的檢測方法可能不夠準確，因為用戶代理可以被篡改。
響應式設計：現(xiàn)代 Web 設計傾向于采用響應式布局，而不是依賴于設備檢測。
性能影響：頻繁地檢測設備類型可能會對性能產(chǎn)生影響，尤其是在移動設備上。

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

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

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

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

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

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

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

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

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

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

第八：一般pc端用jquery，移動端用zepto，因為移動端的流量還是比較重要的，所以引入的資源或者插件，能小則小，一個30k的資源和一個80k的資源，在移動端的差別還是挺大的。