前言

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

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

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

示例代碼

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ī)則。通過(guò) JavaScript，你可以監(jiān)聽(tīng)窗口大小的變化來(lái)判斷設(shè)備類型。

示例代碼

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

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

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

方法3. 使用第三方庫(kù)

有些第三方庫(kù)提供了更復(fù)雜的設(shè)備檢測(cè)功能，例如 detect.js。這些庫(kù)通常會(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ū)提供的插件來(lái)幫助你檢測(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ì)來(lái)適應(yīng)不同設(shè)備，而不是顯式地檢測(cè)設(shè)備類型。然而，在某些特定場(chǎng)景下，如需要加載不同資源或提供不同的用戶體驗(yàn)時(shí)，設(shè)備檢測(cè)仍然是有用的。

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

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

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

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

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

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

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

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

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

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

而未壓縮的jquery是262kb， 壓縮的jquey是83kb，可見(jiàn)兩者的差別之大。

第九：最好能掌握一套完整的前端開(kāi)發(fā)架構(gòu)，比如模塊化、打包、壓縮、緩存、有條件的還可以做一下自動(dòng)化測(cè)試等等，比較好用的有fis，另外，想要快速提升自己的前端開(kāi)發(fā)技術(shù)，鉆研前端架構(gòu)這塊是一個(gè)非常好的方向。

第十： 性能優(yōu)化，包括首屏的打開(kāi)速度、用戶響應(yīng)延遲、渲染性能、動(dòng)畫幀率等在手機(jī)上都需要特別注意。

第十一： 比如在手機(jī)上的300ms的延遲，這在PC端是沒(méi)有的，如果我們希望做成webapp，那么自然就不需要這300ms的延遲，所以可以使用hammer-time.js來(lái)移除這300ms的延遲。

到此這篇關(guān)于前端判斷頁(yè)面是在PC端還是移動(dòng)端打開(kāi)四種方法的文章就介紹到這了,更多相關(guān)判斷頁(yè)面在PC端移動(dòng)端打開(kāi)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論