广泛部署的技术

基于 CSS 的适配

CSS 媒体查询定义了一种机制,允许根据设备的一些特性(尤其是屏幕分辨率)调整网页的布局和行为。

与视口(viewport)相关的CSS单位 vwvhvminvmax 表示当前视口尺寸的百分比,并允许开发者设计自动适应视口尺寸变化的布局。

响应式图像

响应式图像社区组(RICG)开发了对HTML的扩展(picture元素),允许作者根据设备功能和/或其他媒体特性定义要加载的图像。

作为补充,WHATWG指定的srcset属性也可作为HTML的扩展,让Web开发者定义图像的设备像素比,让浏览器选择最适合屏幕像素密度的图片。

SVG可以定义可缩放的图像,而不会造成任何质量损失,这是开发适应多种设备分辨率的Web应用的另一个重要工具。

基于 JS 的适配

Web Components 是一系列将应用逻辑封装在可重用的组件中的技术,其中主要技术包括:

特性规范 / 小组成熟度现有实现
选择浏览器…
基于 CSS 的适配Media Queries Level 3
CSS 工作组 (CSS Working Group)
正式推荐标准
CSS 值和单位模块第三版中的与视口相关的CSS单位 (viewport-percentage lengths in CSS Values and Units Module Level 3)
CSS 工作组 (CSS Working Group)
候选推荐标准
响应式图像HTML标准中的picture 元素 (picture element in HTML Standard)
Web 超文本应用技术工作小组 (WHATWG)
持续更新标准
HTML标准中的srcset 属性 (srcset attribute in HTML Standard)
Web 超文本应用技术工作小组 (WHATWG)
持续更新标准
可扩展矢量图形 (SVG) 1.1 (Scalable Vector Graphics (SVG) 1.1 (Second Edition))
SVG 工作组 (SVG Working Group)
正式推荐标准
基于 JS 的适配HTML标准中的template 元素 (The template element in HTML Standard)
Web 超文本应用技术工作小组 (WHATWG)
持续更新标准
HTML标准中的自定义元素 (Custom elements in HTML Standard)
Web 超文本应用技术工作小组 (WHATWG)
持续更新标准
HTML标准中的与 JavaScript 模块系统的集成 (Integration with the JavaScript module system in HTML Standard)
Web 超文本应用技术工作小组 (WHATWG)
持续更新标准
DOM 标准中的影子树 (Shadow tree in DOM Standard)
Web 超文本应用技术工作小组 (WHATWG)
持续更新标准

开发中的技术

基于 CSS 的适配

CSS设备适配定义了一组CSS指令来定义该布局应该基于的尺寸,相对于底层设备的大小——指定<meta name="viewport">元素实现的内容。

CSS 移动文本大小调整让文本适应页面的缩放部分。

媒体查询第四版和第五版添加了一些适应移动环境中的用户界面的相关的特性,包括:

  • 通过 pointer(及其配套的 any-pointer)的查询指针设备的存在与否及其类型。
  • 通过 hover 查询设备是否支持悬停功能。
  • 通过 prefers-contrastprefers-color-scheme 对环境亮度变化做出反应或遵循用户对亮或暗主题的偏好的能力。
  • 通过 prefers-reduced-motion 来减少页面中的动画数量,节省电池。
  • 脚本定义的变量做出反应,从而更容易满足应用整体逻辑中更复杂的适配规则。

基于 JS 的适配

以下是可以为 Web Components 设置样式的技术:

  • CSS 域使 Web 开发者可以为自定义元素定义默认样式。
  • CSS 影子部件允许在影子树中标记元素并在外部页面中修改其样式,从而提供了一种易于使用的机制来根据需要自定义自定义元素的样式。
  • 可构造样式表对象提供了一个 API,用于从 JavaScript 脚本创建样式表对象,使向 Web Components 添加样式更加方便和高效。

元素查询的用例和要求中所述,开发人员需要控制相对于其容器大小的单个元素的布局,以创建适应各种设备和情景的复杂响应式应用。window 上的媒体查询和 resize 事件只允许开发者相对于视口大小调整组件的布局,而元素大小变化观察器定义了一个接口,用于观察元素大小的变化并响应这些变化,允许设计可跨应用和设备的响应式 Web Components

服务器端适配

在移动设备上进行内容适配的常用方法是让服务器提供适合用户设备的内容。这种方法避免了向客户端发送客户端不需要的内容,节约了网络带宽,避免了在客户端上运行适配逻辑,保留了CPU和内存。服务器端适配用于依赖嗅探 User-Agent 字符串并将其映射到设备数据库以适配相关功能。这种机制很容易出错,需要对设备数据库进行持续维护。通过由IETF HTTP工作组开发的HTTP客户端提示机制,客户端和服务器现在可以选择交换相关功能以实现高效的内容自适应。Web性能工作组已经开始使用设备内存规范来扩展这些提示,以表示设备上可用的内存。该规范还定义了一个API来将该信息显示给运行在客户端上的Web应用。

媒体捕获功能

媒体捕捉与媒体流 API 开放了一些有关摄像头和麦克风功能的信息,以便利用手机上提供的各种媒体捕获设备。

特性规范 / 小组成熟度现有实现
选择浏览器…
基于 CSS 的适配CSS 设备适配模块第一版 (CSS Device Adaptation Module Level 1)
CSS 工作组 (CSS Working Group)
工作草案
CSS 移动文本大小调整模块第一版 (CSS Mobile Text Size Adjustment Module Level 1)
CSS 工作组 (CSS Working Group)
编辑草案

已有稳定实现:
在 Chrome(桌面, 移动)中已有稳定实现。 来源:Can I use在 Microsoft Edge(桌面)中已有稳定实现。 来源:Can I use在 Firefox(桌面)中已有稳定实现。 来源:Chrome Platform Status在 Safari(桌面)中已有稳定实现。 来源:Chrome Platform Status在 百度浏览器(移动)中已有稳定实现。 来源:Can I use在 Opera(桌面, 移动)中已有稳定实现。 来源:Can I use在 QQ浏览器(移动)中已有稳定实现。 来源:Can I use在 三星浏览器(移动)中已有稳定实现。 来源:Can I use在 UC浏览器(移动)中已有稳定实现。 来源:Can I use

已有实验性实现:
在 Firefox(移动)中已有实验性实现。 特性需要使用浏览器引擎前缀。 来源:Can I use在 Safari(移动)中已有实验性实现。 特性需要使用浏览器引擎前缀。 来源:Can I use

媒体查询第五版中的pointer feature (pointer feature in Media Queries Level 5)
CSS 工作组 (CSS Working Group)
工作草案
媒体查询第五版中的hover feature (hover feature in Media Queries Level 5)
CSS 工作组 (CSS Working Group)
工作草案
媒体查询第五版中的prefers-contrast (prefers-contrast in Media Queries Level 5)
CSS 工作组 (CSS Working Group)
工作草案

已有稳定实现:
在 Chrome(桌面, 移动)中已有稳定实现。 来源:MDN Browser Compatibility Data在 Microsoft Edge(桌面)中已有稳定实现。 来源:MDN Browser Compatibility Data在 Firefox(桌面, 移动)中已有稳定实现。 来源:MDN Browser Compatibility Data在 Safari(桌面, 移动)中已有稳定实现。 来源:MDN Browser Compatibility Data在 百度浏览器(移动)中已有稳定实现。 特性支持可能不完整。 来源:Can I use在 Opera(桌面)中已有稳定实现。 来源:MDN Browser Compatibility Data在 QQ浏览器(移动)中已有稳定实现。 特性支持可能不完整。 来源:Can I use在 三星浏览器(移动)中已有稳定实现。 来源:MDN Browser Compatibility Data在 UC浏览器(移动)中已有稳定实现。 特性支持可能不完整。 来源:Can I use

媒体查询第五版中的prefers-color-scheme feature (prefers-color-scheme feature in Media Queries Level 5)
CSS 工作组 (CSS Working Group)
工作草案
媒体查询第五版中的prefers-reduced-motion feature (prefers-reduced-motion feature in Media Queries Level 5)
CSS 工作组 (CSS Working Group)
工作草案

已有稳定实现:
在 Chrome(桌面, 移动)中已有稳定实现。 来源:MDN Browser Compatibility Data在 Microsoft Edge(桌面)中已有稳定实现。 来源:MDN Browser Compatibility Data在 Firefox(桌面, 移动)中已有稳定实现。 来源:Chrome Platform Status在 Safari(桌面, 移动)中已有稳定实现。 来源:Chrome Platform Status在 百度浏览器(移动)中已有稳定实现。 特性支持可能不完整。 来源:Can I use在 Opera(桌面, 移动)中已有稳定实现。 来源:MDN Browser Compatibility Data在 QQ浏览器(移动)中已有稳定实现。 特性支持可能不完整。 来源:Can I use在 三星浏览器(移动)中已有稳定实现。 来源:MDN Browser Compatibility Data在 UC浏览器(移动)中已有稳定实现。 特性支持可能不完整。 来源:Can I use

基于 JS 的适配CSS 域模块第一版 (CSS Scoping Module Level 1)
CSS 工作组 (CSS Working Group)
工作草案
CSS 影子部件 (CSS Shadow Parts)
CSS 工作组 (CSS Working Group)
工作草案
CSS Object Model (CSSOM)中的Constructable stylesheets (Constructable stylesheets in CSS Object Model (CSSOM))
CSS 工作组 (CSS Working Group)
工作草案
元素大小变化观察器 (Resize Observer)
CSS 工作组 (CSS Working Group)
工作草案
服务器端适配设备内存 (Device Memory)
Web 性能工作组 (Web Performance Working Group)
工作草案
媒体捕获功能媒体捕捉与媒体流中的源功能 (Source capabilities in Media Capture and Streams)
Web 实时通讯工作组 (WebRTC Working Group)
候选推荐标准

探索性工作

基于 JS 的适配

大多数移动设备都具有屏幕键盘,也通常让用户能够缩放页面。这两个功能都保留了布局视口(网页在布局其用户界面使用的视口),以免被 position: fixed 的元素弄乱屏幕。Visual Viewport API 为开发人员提供了一种查看可视视口属性(用户当前可见的内容)并与之交互的方法,并在这些属性发生变化时得到通知。

服务器端适配

User-Agent Client Hints 提案定义了一组客户端提示,这些提示为开发者提供了在必要时执行基于用户代理的内容协商(content negotiation)的能力,同时避免了 User-Agent HTTP头的历史包袱并减少了网站追踪用户的可能性,这也是服务器端适配的基础。

特性规范 / 小组实现意向
选择浏览器…
基于 JS 的适配可视视口 API (Visual Viewport API)
Web 平台孵化社区组 (Web Platform Incubator Community Group)
服务器端适配User-Agent Client Hints
Web 平台孵化社区组 (Web Platform Incubator Community Group)