JS基础--navigator 和 screen

最新推荐文章于 2025-03-13 15:28:13 发布

念你啊

最新推荐文章于 2025-03-13 15:28:13 发布

阅读量399

点赞数

分类专栏：面试文章标签： js

本文链接：https://blog.youkuaiyun.com/weixin_54500649/article/details/115060261

版权

面试专栏收录该内容

11 篇文章

订阅专栏

这篇博客主要介绍了JavaScript中的Navigator对象和Screen对象。Navigator对象提供了关于浏览器的信息，通常用于检测版本。Screen对象则提供了当前窗口所在屏幕的详细信息，如高度、宽度、可用空间和色彩深度等。此外，还提到了Screen.orientation属性用于描述屏幕方向，并给出了根据屏幕尺寸进行页面重定向的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Navigator对象
Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。
对象属性:

在这里插入图片描述

查看浏览器的名称和版本，代码如下:

<script type="text/javascript">
   var browser=navigator.appName;
   var b_version=navigator.appVersion;
   document.write("Browser name"+browser);
   document.write("<br>");
   document.write("Browser version"+b_version);
</script>

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 }

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

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

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

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