此页面由 Cloud Translation API 翻译。

Chrome 100 的新变化

Pete LePage

以下是您需要知晓的相关信息：

Chrome 100 采用三位数版本号
回顾 Chrome 首次发布以来的 #100CoolWebMoments（100 个精彩的网络时刻）。
用户代理字符串发生了一些重要变化。
借助 Multi-Screen Window Placement API，您可以枚举连接到用户机器的显示屏，并将窗口放置在特定屏幕上。
还有许多其他功能。

我是 Pete LePage。我们来深入了解一下 Chrome 100 中面向开发者的新变化。

Chrome 100

当浏览器首次达到版本 10 时，由于主要版本号从一位数变为两位数，因此出现了一些问题。希望我们学到的一些知识有助于您从两位数转换为三位数。

Chrome 100 现已发布，Firefox 100 也即将发布。这些三位数版本号可能会在依赖于以某种方式识别浏览器版本的网站上导致问题。在过去几个月里，Firefox 团队和 Chrome 团队开展了一些实验，在这些实验中，浏览器报告的版本号为 100，但实际上并非如此。

这导致了一些用户报告的问题，其中许多问题现已得到修复。不过，我们仍需要您的帮助。

如果您是网站维护者，请使用 Chrome 和 Firefox 100 测试您的网站。
如果您开发了 User-Agent 解析库，请添加测试来解析大于或等于 100 的版本。

如需了解详情，请参阅 web.dev 上的Chrome 和 Firefox 即将达到主要版本 100。

100 个精彩的网络时刻

“100 Cool Web Moments”宣传图片

我们很高兴见证 Web 技术的不断发展，并看到您在过去 100 个 Chrome 版本中构建的所有精彩内容。我们认为，回顾过去 14 年发生的 #100CoolWebMoments（#100 个精彩的网络时刻）会很有趣。

告诉我们您最喜欢哪些瞬间。如果我们漏掉了什么（我们肯定漏掉了），请在 Twitter 上向 @Chromiumdev 发推文，并加上 #100CoolWebMoments 标签。尽情享用吧！

缩短的用户代理字符串

说到用户代理，Chrome 100 将是默认支持未缩减的 User-Agent 字符串的最后一个版本。这是将 User-Agent 字符串替换为新的 User-Agent Client Hints API 策略的一部分。

从 Chrome 101 开始，用户代理将逐步缩减。

请参阅 [Chromium 博客][crblog] 上的用户代理缩减源试用和日期，详细了解将移除哪些内容以及移除时间。

Multi-Screen Window Placement API

对于某些应用，打开新窗口并将其放置在特定位置或特定显示屏上是一项重要功能。例如，使用幻灯片进行演示时，我希望幻灯片在主显示屏上全屏显示，而演讲者备注则显示在另一个显示屏上。

借助 Multi-Screen Window Placement API，您可以枚举连接到用户机器的显示屏，并在特定屏幕上放置窗口。

您可以使用 window.screen.isExtended 快速检查是否有多个屏幕连接到设备。

const isExtended = window.screen.isExtended;
// returns true/false

不过，主要功能位于 window.getScreenDetails() 中，该函数会提供有关已连接显示屏的详细信息。

const x = await window.getScreenDetails();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

例如，您可以确定主屏幕，然后使用 requestFullscreen() 让元素在该显示屏上全屏显示。

try {
  const screens = await window.getScreenDetails();
  const primary = screens
         .filter((screen) => screen.primary)[0]
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

它还提供了监听更改的方法，例如，如果插入或移除新显示屏、分辨率发生变化等。

const screens = await window.getScreenDetails();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

如需深入了解，请参阅 web.dev 上 Tom 更新后的文章使用 Multi-Screen Window Placement API 管理多个显示屏。

等等！

当然，还有许多其他功能。

针对 HID 设备新增了 forget() 方法，可让您撤消用户授予的对 HID 设备的权限。

// Request an HID device.
const [device] = await navigator.hid.requestDevice(opts);


// Then later, revoke permission to the device.
await device.forget();

对于 WebNFC，makeReadOnly() 方法可让您将 NFC 标签设为永久只读。

const ndef = new NDEFReader();
await ndef.makeReadOnly();

深入阅读

本文仅介绍了一些主要亮点。如需了解 Chrome 100 中的其他变更，请参阅以下链接。

如需及时了解最新动态，请订阅 Chrome 开发者 YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。

我是 Pete LePage，Chrome 101 发布后，我会立即为您介绍 Chrome 中的新变化！