JavaScript 實現網站僅允許手機端訪問

核心思路

通過檢測 navigator.userAgent（UA）字符串判斷設備類型，若為桌面瀏覽器則重定向至提示頁或阻止內容顯示。

實現代碼

<script>
(function() {
    var ua = navigator.userAgent.toLowerCase();
    // 簡易移動端特徵
    var isMobile = /iphone|ipad|ipod|android|mobile|micromessenger/.test(ua);
    
    if (!isMobile) {
        // 方案一：跳轉提示頁
        window.location.href = '/mobile-only.html';
        
        // 方案二：隱藏內容並顯示遮罩
        // document.body.innerHTML = '<div style="padding:2rem;text-align:center;">請使用手機訪問</div>';
    }
})();
</script>

進階檢測庫

推薦使用成熟庫 ua-parser-js 或 mobile-detect.js，準確識別設備、瀏覽器、操作系統：

<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@1.0.35/dist/ua-parser.min.js"></script>
<script>
var parser = new UAParser();
var result = parser.getResult();
if (result.device.type !== 'mobile') {
    // 非手機設備處理
}
</script>

安全性提醒

UA 可偽造：技術熟練用戶可通過瀏覽器開發工具修改 UA 偽裝為手機。此方案僅作「體驗引導」，不可作為權限控制依據。真正的訪問控制需在服務端驗證（如 Session、Token、設備指紋）。

服務端配合

// Java Servlet 示例
String ua = request.getHeader("User-Agent");
if (ua != null && !ua.matches("(?i).*(mobile|android|iphone).*")) {
    response.sendRedirect("/pc-not-allowed.jsp");
    return;
}