广泛部署的技术
CSS 媒体查询定义了一种机制,允许根据设备的一些特性(尤其是屏幕分辨率)调整网页的布局和行为。
与视口(viewport)相关的CSS单位 vw
、vh
、vmin
和 vmax
表示当前视口尺寸的百分比,并允许开发者设计自动适应视口尺寸变化的布局。
响应式图像社区组(RICG)开发了对HTML的扩展(picture元素
),允许作者根据设备功能和/或其他媒体特性定义要加载的图像。
作为补充,WHATWG指定的srcset属性
也可作为HTML的扩展,让Web开发者定义图像的设备像素比,让浏览器选择最适合屏幕像素密度的图片。
SVG可以定义可缩放的图像,而不会造成任何质量损失,这是开发适应多种设备分辨率的Web应用的另一个重要工具。
开发中的技术
CSS设备适配定义了一组CSS指令来定义该布局应该基于的尺寸,相对于底层设备的大小——指定<meta name="viewport">
元素实现的内容。
CSS 移动文本大小调整让文本适应页面的缩放部分。
媒体查询第四版添加了判断指向设备存在与否和类型等以调整网页的布局和行为的能力。此外,媒体查询第五版让开发人员能够指定对环境亮度和脚本定义的变量做出反应的媒体查询,从而更容易满足应用整体逻辑中更复杂的适配规则。
Web 组件是一系列使应用将其逻辑封装在可重用的组件中的技术,其中主要技术包括:
<template>
元素允许声明可以通过脚本克隆并插入文档中的 HTML 片段。- 自定义元素为 Web 开发者提供了一种构建自己的功能齐全的 DOM 元素的方法。
- 与 JavaScript 模块系统的集成使 Web 开发者可以利用组件中的 JavaScript 模块。
- 影子 DOM 允许浏览器渲染不包含在主 DOM 文档树中的 DOM 元素。
- CSS 域使 Web 开发者可以为自定义元素定义默认样式。
- CSS 影子部件允许在影子树中标记元素并在外部页面中修改其样式,从而提供了一种易于使用的机制来根据需要自定义自定义元素的样式。
如元素查询的用例和要求中所述,开发人员需要控制相对于其容器大小的单个元素的布局,以创建适应各种设备和情景的复杂响应式应用。window
上的媒体查询和 resize
事件只允许开发者相对于视口大小调整组件的布局,而元素大小变化观察器定义了一个接口,用于观察元素大小的变化并响应这些变化,允许设计可跨应用和设备的响应式 Web 组件。
在移动设备上进行内容适配的常用方法是让服务器提供适合用户设备的内容。这种方法避免了向客户端发送客户端不需要的内容,节约了网络带宽,避免了在客户端上运行适配逻辑,保留了CPU和内存。服务器端适配用于依赖嗅探 User-Agent
字符串并将其映射到设备数据库以适配相关功能。这种机制很容易出错,需要对设备数据库进行持续维护。通过由IETF HTTP工作组开发的HTTP客户端提示机制,客户端和服务器现在可以选择交换相关功能以实现高效的内容自适应。Web性能工作组已经开始使用设备内存规范来扩展这些提示,以表示设备上可用的内存。该规范还定义了一个API来将该信息显示给运行在客户端上的Web应用。
媒体捕捉与媒体流 API 开放了一些有关摄像头和麦克风功能的信息,以便利用手机上提供的各种媒体捕获设备。
探索性工作
大多数移动设备都具有屏幕键盘,也通常让用户能够缩放页面。这两个功能都保留了布局视口(网页在布局其用户界面使用的视口),以免被 position: fixed
的元素弄乱屏幕。Visual Viewport API 为开发人员提供了一种查看可视视口属性(用户当前可见的内容)并与之交互的方法,并在这些属性发生变化时得到通知。
特性 | 规范 / 小组 | 实现意向选择浏览器… |
---|---|---|
基于 JS 的适配 | 可视视口 API (Visual Viewport API) Web 平台孵化社区组 (Web Platform Incubator Community Group) |