• 32 【Navigator 对象和Screen 对象】

    Navigator 对象和Screen 对象

    1.Navigator 对象的属性

    /*
 * Navigator
 * 	- 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
 * 	- 由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
 * 	- 一般我们只会使用userAgent来判断浏览器的信息，
 * 		userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，
 * 		不同的浏览器会有不同的userAgent
 * 
 * 火狐的userAgent
 * 	Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
 * 
 * Chrome的userAgent
 *  Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36
 */

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    1.1 Navigator.userAgent

    navigator.userAgent属性返回浏览器的 User Agent 字符串，表示用户设备信息，包含了浏览器的厂商、版本、操作系统等信息。

    下面是 Chrome 浏览器的userAgent。

    navigator.userAgent
// "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36"

    • 1
    • 2

    通过userAgent属性识别浏览器，不是一个好办法。因为必须考虑所有的情况（不同的浏览器，不同的版本），非常麻烦，而且用户可以改变这个字符串。这个字符串的格式并无统一规定，也无法保证未来的适用性，各种上网设备层出不穷，难以穷尽。所以，现在一般不再通过它识别浏览器了，而是使用“功能识别”方法，即逐一测试当前浏览器是否支持要用到的 JavaScript 功能。

    不过，通过userAgent可以大致准确地识别手机浏览器，方法就是测试是否包含mobi字符串。

    var ua = navigator.userAgent.toLowerCase();

if (/mobi/.test(ua)) {
  // 手机浏览器
} else {
  // 非手机浏览器
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    如果想要识别所有移动设备的浏览器，可以测试更多的特征字符串。

    /mobi|android|touch|mini/.test(ua)

    • 1

    识别用户浏览器品牌

    识别用户浏览器品牌通常使用 navigator.userAgent 属性。

    var sUsrAg = navigator.userAgent;

if (sUsrAg.indexOf("Firefox") > -1) {
} else if (sUsrAg.indexOf("Opera") > -1) {
} else if (sUsrAg.indexOf("Edge") > -1) {
} else if (sUsrAg.indexOf("Chrome") > -1) {
} else if (sUsrAg.indexOf("Safari") > -1) {
} else {
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    1.2 Navigator.platform

    Navigator.platform属性返回用户的操作系统信息，比如MacIntel、Win32、Linux x86_64等 。

    navigator.platform
// "Linux x86_64"

    • 1
    • 2

    1.3 Navigator.onLine

    navigator.onLine属性返回一个布尔值，表示用户当前在线还是离线（浏览器断线）。

    navigator.onLine // true

    • 1

    有时，浏览器可以连接局域网，但是局域网不能连通外网。这时，有的浏览器的onLine属性会返回true，所以不能假定只要是true，用户就一定能访问互联网。不过，如果是false，可以断定用户一定离线。

    用户变成在线会触发online事件，变成离线会触发offline事件，可以通过window.ononline和window.onoffline指定这两个事件的回调函数。

    window.addEventListener('offline', function(e) { console.log('offline'); });
window.addEventListener('online', function(e) { console.log('online'); });

    • 1
    • 2

    1.4 Navigator.language，Navigator.languages

    Navigator.language属性返回一个字符串，表示浏览器的首选语言。该属性只读。

    navigator.language // "en"

    • 1

    Navigator.languages属性返回一个数组，表示用户可以接受的语言。Navigator.language总是这个数组的第一个成员。HTTP 请求头信息的Accept-Language字段，就来自这个数组。

    navigator.languages  // ["en-US", "en", "zh-CN", "zh", "zh-TW"]

    • 1

    如果这个属性发生变化，就会在window对象上触发languagechange事件。

    2.Navigator对象总结

    window.navigator 属性可以检索 navigator 对象，它内部含有用户此次活动的浏览器的相关属性和标识。

    属性意义
    appName浏览器官方名称
    appVersion浏览器版本
    userAgent浏览器用户代理（含有内核信息和封装壳信息）
    platform用户操作系统

    【案例】

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script>
        console.log('浏览器品牌', navigator.appName);
        console.log('浏览器版本', navigator.appVersion);
        console.log('用户代理', navigator.userAgent);
        console.log('操作系统', navigator.platform);
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    3.Screen 对象

    Screen 对象表示当前窗口所在的屏幕，提供显示设备的信息。window.screen属性指向这个对象。

    该对象有下面的属性。

    • Screen.height：浏览器窗口所在的屏幕的高度（单位像素）。除非调整显示器的分辨率，否则这个值可以看作常量，不会发生变化。显示器的分辨率与浏览器设置无关，缩放网页并不会改变分辨率。
    • Screen.width：浏览器窗口所在的屏幕的宽度（单位像素）。
    • Screen.availHeight：浏览器窗口可用的屏幕高度（单位像素）。因为部分空间可能不可用，比如系统的任务栏或者 Mac 系统屏幕底部的 Dock 区，这个属性等于height减去那些被系统组件的高度。
    • Screen.availWidth：浏览器窗口可用的屏幕宽度（单位像素）。
    • Screen.pixelDepth：整数，表示屏幕的色彩位数，比如24表示屏幕提供24位色彩。
    • Screen.colorDepth：Screen.pixelDepth的别名。严格地说，colorDepth 表示应用程序的颜色深度，pixelDepth 表示屏幕的颜色深度，绝大多数情况下，它们都是同一件事。
    • Screen.orientation：返回一个对象，表示屏幕的方向。该对象的type属性是一个字符串，表示屏幕的具体方向，landscape-primary表示横放，landscape-secondary表示颠倒的横放，portrait-primary表示竖放，portrait-secondary表示颠倒的竖放。

    下面是Screen.orientation的例子。

    window.screen.orientation
// { angle: 0, type: "landscape-primary", onchange: null }

    • 1
    • 2

    下面的例子保证屏幕分辨率大于 1024 x 768。

    if (window.screen.width >= 1024 && window.screen.height >= 768) {
  // 分辨率不低于 1024x768
}

    • 1
    • 2
    • 3

    下面是根据屏幕的宽度，将用户导向不同网页的代码。

    if ((screen.width <= 800) && (screen.height <= 600)) {
  window.location.replace('small.html');
} else {
  window.location.replace('wide.html');
}

    • 1
    • 2
    • 3
    • 4
    • 5
  • 相关阅读:
    MySQL 快速入门之第一章 账号管理、建库以及四大引擎
    5G+AI+XR：将成为开启空间互联网的钥匙
    .360勒索病毒和.halo勒索病毒数据恢复|金蝶、用友、ERP等数据恢复
    Cross-Entropy Loss(多分类损失函数)
    Python中的*args和**kwargs
    Zephyr-7B-β ：类GPT的高速推理LLM
    Scala012--Scala中的常用集合函数及操作Ⅲ
    VGA设计（原理说明。Verilog代码实现，仿真结果）
    【初阶与进阶C++详解】第十篇：list
    MFC web文件 CHttpFile的使用初探
  • 原文地址：https://blog.csdn.net/DSelegent/article/details/126542926