屏幕唤醒锁测试 - 保持常亮及事件监听
请求和释放屏幕唤醒锁,并监听释放事件,适用于视频播放或演示场景。
UD5工具箱
点击圆形按钮切换唤醒锁
屏幕唤醒锁(Screen Wake Lock API)是一项现代浏览器API,允许网页请求设备屏幕保持常亮,防止屏幕自动变暗或锁定。这对于需要长时间显示内容的应用场景非常有用,例如:
该API不需要用户授予特殊权限,但必须在HTTPS安全环境下才能使用,且需要用户主动交互(如点击按钮)来触发激活。
截至2025年,Wake Lock API的支持情况如下:
本工具会自动检测浏览器兼容性,并在顶部状态卡片中显示结果。
会有所增加,但影响可控。保持屏幕常亮确实会比正常使用消耗更多电量,因为屏幕是移动设备最耗电的组件之一。但Wake Lock API本身并不会额外消耗资源——它只是阻止了系统正常的屏幕超时关闭机制。
值得注意的是:
如果设备电量不足,建议连接充电器后再长时间使用唤醒锁功能。
当用户切换到其他浏览器标签页或最小化浏览器窗口时,页面变为不可见状态(visibilityState: hidden)。出于安全和节能考虑,浏览器可能会自动释放该页面的唤醒锁。
本工具提供了"自动恢复"功能(默认开启):
这是浏览器的正常行为,并非bug。自动恢复机制能最大程度减少对您使用体验的影响。
Wake Lock API的设计非常注重安全和隐私:
总的来说,Wake Lock API是一个安全、轻量且尊重用户隐私的现代Web API。
本工具在移动端已做响应式适配,在手机和平板上均可流畅使用。
在Wake Lock API出现之前,开发者使用了一些间接方法来尝试保持屏幕常亮,但这些方法都有局限性:
Wake Lock API是目前最标准、最可靠的解决方案,推荐优先使用。本工具正是基于该API构建的演示和测试工具。
请求和释放屏幕唤醒锁,并监听释放事件,适用于视频播放或演示场景。
请求浏览器保持屏幕唤醒,防止自动锁屏,显示当前唤醒锁状态。
显示当前屏幕方向,并尝试锁定为横屏或竖屏模式,仅部分浏览器支持。
将屏幕变为纯白色或指定颜色,最高亮度辅助照明或信号。
设计振动时长与停顿数组,点击试振,复制代码在移动端触发自定义触感反馈。
生成半透明暖色或冷色遮罩层叠加在页面上,模拟护眼模式或色温调节。
连接游戏手柄,触发不同时长和强度的振动效果,测试Vibration Actuator API。
连接游戏手柄,分别控制左右握把的振动马达强度和时间,测试振动效果。
在开发环境中模拟 periodicSync 事件,触发后查看 SW 中的处理逻辑和网络请求。
演示如何拦截PWA安装事件并自定义安装按钮,查看浏览器原生安装提示效果。
支持任意格式颜色输入,计算对比度并显示WCAG 2.1各级别通过情况,含颜色建议。
在网页顶部添加半透明暖色或暗色覆盖层,调节不透明度,降低屏幕刺眼感。
拖拉RGB三个滑块混合颜色,模拟硬件调色体验,显示16进制及色温感觉。
自定义箭头方向、颜色、大小和动画,生成无需JavaScript的纯CSS tooltip组件代码。
展示几组在各类色盲下仍可区分的定性数据配色方案,含Hex码。
分别使用主线程Canvas和OffscreenCanvas在Worker中渲染动画,对比FPS和流畅度。
使用三个滑块精细调整 HSL 各分量,实时预览颜色并复制十六进制或 RGB。
模拟经典玩具,按方向键或虚拟旋钮绘制线条,按空格键晃动清除。
加载两段节奏循环,用鼠标在虚拟唱片上移动模拟黑胶搓碟效果。
上传精灵图,自动切片检测或手动框选获取背景定位数值,生成CSS Sprite代码。
拖放 lcov.info 文件,以颜色标示每行代码的覆盖状态。
选择触发位置、箭头方向与样式,生成轻量悬停提示框代码。
编写正则表达式,在文本中用不同颜色高亮整个匹配和每个捕获组。
绑定动画进度到滚动位置,交互式调整参数,直观理解scroll-timeline和view-timeline。
并列播放所有CSS内置缓动函数(ease, linear等)的动画效果,方便对比选择。
在后台 Worker 中计算大范围内的质数,主线程实时绘制进度条,展示多线程优势。
编写Brainfuck代码,以可视化的方式步进执行,观察活动纸带和指针。
拖拽滑块调整背景模糊度、透明度与边框发光,实时预览毛玻璃面板并复制CSS代码。
编写带有伪类的选择器,实时高亮匹配的HTML元素,探索现代CSS选择器的能力。
在线正则表达式测试工具,支持JavaScript正则匹配、替换、提取等操作,即时显示匹配结果和高亮。