js怎么判断页面用什么打开的

JavaScript判断页面用什么打开的，常见的方法包括：User-Agent检测、Media Queries、浏览器特性检测。其中，User-Agent检测是最常用的方法之一。通过读取浏览器发送的User-Agent字符串，可以判断出用户使用的是桌面浏览器、移动设备还是其他设备。

一、USER-AGENT检测

User-Agent检测是通过读取浏览器发送的User-Agent字符串来判断用户使用的设备类型。User-Agent字符串包含了设备和浏览器的详细信息，可以帮助开发者区分不同的设备和浏览器。下面是一个示例代码：

function detectDevice() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;
    // 检查是否是移动设备
    if (/android/i.test(userAgent)) {
        return "Android";
    }
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return "iOS";
    }
    // 检查是否是桌面设备
    if (/Windows|Macintosh|Linux/.test(userAgent)) {
        return "Desktop";
    }
    return "Unknown";
}
console.log(detectDevice());

详细描述：在这段代码中，我们首先获取浏览器的User-Agent字符串。然后，通过正则表达式检查字符串中是否包含特定的设备信息，如android、iPad、iPhone等。如果匹配成功，则返回对应的设备类型。如果没有匹配成功，则返回Unknown。

二、MEDIA QUERIES

Media Queries是一种用于检测设备特性的方法，通常用于CSS中，但在JavaScript中也可以使用。通过检查设备的屏幕宽度、高度、分辨率等特性，可以判断设备类型。以下是一个示例代码：

function detectDeviceWithMediaQueries() {
    if (window.matchMedia("(max-width: 767px)").matches) {
        return "Mobile";
    }
    if (window.matchMedia("(min-width: 768px) and (max-width: 1024px)").matches) {
        return "Tablet";
    }
    if (window.matchMedia("(min-width: 1025px)").matches) {
        return "Desktop";
    }
    return "Unknown";
}
console.log(detectDeviceWithMediaQueries());

详细描述：在这个示例中，我们使用了window.matchMedia方法来检查设备的屏幕宽度。通过定义不同的媒体查询条件，可以判断设备是手机、平板还是桌面设备。对于屏幕宽度在767px以下的设备，判断为手机；对于屏幕宽度在768px到1024px之间的设备，判断为平板；对于屏幕宽度大于1025px的设备，判断为桌面设备。

三、浏览器特性检测

浏览器特性检测是通过检测浏览器是否支持某些特性来判断设备类型。例如，可以通过检测触摸事件的支持情况来判断设备是否是触摸屏设备。以下是一个示例代码：

function detectDeviceWithFeatures() {
    if ('ontouchstart' in window || navigator.maxTouchPoints) {
        return "Touch Device";
    } else {
        return "Non-Touch Device";
    }
}
console.log(detectDeviceWithFeatures());

详细描述：在这个示例中，我们通过检查window对象中是否包含ontouchstart属性，或者navigator对象中的maxTouchPoints属性来判断设备是否支持触摸事件。如果支持，则判断为触摸设备；否则，判断为非触摸设备。

四、结合多种方法进行判断

在实际开发中，通常会结合多种方法来提高判断的准确性。以下是一个结合User-Agent检测、Media Queries和浏览器特性检测的方法：

function detectDeviceComprehensively() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;
    // 检查是否是移动设备
    if (/android/i.test(userAgent)) {
        return "Android Mobile";
    }
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return "iOS Mobile";
    }
    // 检查是否是桌面设备
    if (/Windows|Macintosh|Linux/.test(userAgent)) {
        return "Desktop";
    }
    // 使用媒体查询进行进一步判断
    if (window.matchMedia("(max-width: 767px)").matches) {
        return "Mobile Device";
    }
    if (window.matchMedia("(min-width: 768px) and (max-width: 1024px)").matches) {
        return "Tablet Device";
    }
    if (window.matchMedia("(min-width: 1025px)").matches) {
        return "Desktop Device";
    }
    // 检查触摸特性
    if ('ontouchstart' in window || navigator.maxTouchPoints) {
        return "Touch Device";
    } else {
        return "Non-Touch Device";
    }
}
console.log(detectDeviceComprehensively());

详细描述：在这个示例中，我们首先使用User-Agent检测来区分Android、iOS和桌面设备。然后，使用媒体查询进一步细分设备类型，如移动设备、平板设备和桌面设备。最后，使用浏览器特性检测来判断设备是否支持触摸事件。通过结合多种方法，可以更准确地判断用户使用的设备类型。

五、使用第三方库

除了自己编写代码进行设备检测，还可以使用一些第三方库来简化工作。例如，Modernizr和Detect.js是两个常用的设备检测库。

Modernizr：Modernizr是一个功能检测库，可以帮助开发者检测浏览器是否支持某些特性。以下是一个示例：

if (Modernizr.touch) {
    console.log("Touch Device");
} else {
    console.log("Non-Touch Device");
}

Detect.js：Detect.js是一个设备和浏览器检测库，可以提供详细的设备和浏览器信息。以下是一个示例：

var device = new Detectizr.Device();
if (device.isMobile) {
    console.log("Mobile Device");
} else if (device.isTablet) {
    console.log("Tablet Device");
} else {
    console.log("Desktop Device");
}

详细描述：使用第三方库可以简化设备检测的工作，并提高检测的准确性。这些库通常已经包含了大量的设备和浏览器信息，可以帮助开发者更准确地判断用户使用的设备类型。

六、总结

JavaScript判断页面用什么打开的，常见的方法包括：User-Agent检测、Media Queries、浏览器特性检测、结合多种方法、使用第三方库。通过结合多种方法，可以提高判断的准确性。例如，可以先使用User-Agent检测大致区分设备类型，然后使用Media Queries和浏览器特性检测进行进一步细分。此外，还可以使用第三方库来简化设备检测的工作。无论使用哪种方法，最终的目的是为了更好地适配不同设备，提供更好的用户体验。