macOS 或者 Windows 上用什么方法可以让一个网站像这个视频里这样显示在一个无边框的窗口里？

38 条回复 • 2024-12-16 17:22:38 +08:00

1

DeWjjj

5 小时 1 分钟前

这个网站好像也只是视频吧，看到里面的 mpeg 资源，点进去就是一个大号的视频播放。

2

ThinkMan

5 小时 0 分钟前 via iPhone

ARC 浏览器不行吗

3

xuld

4 小时 55 分钟前

任何网站都可以安装成 app ，然后启动 app 后就像软件一样，单独一个窗口，看不出是网站的感觉。
以 edge 为例，先点击浏览器地址栏右侧的“安装为应用”，新建开始菜单的快捷方式，然后点击创建的快捷方式，就可以看到独立窗口的网页

4

Baboonowen

4 小时 53 分钟前

https://github.com/tw93/Pake

5

sleepm

4 小时 41 分钟前

画中画
Picture-in-Picture
pip
爱奇艺网页也可以

6

sleepm

4 小时 32 分钟前

网页的播放器如果不支持
播放的时候，chrome 右上角可以也有按钮可以进入画中画模式

7

pxiphx891

4 小时 29 分钟前

我记得低版本的 macOS 有一个桌面小组件，好像是类似的功能

8

CSGO

4 小时 27 分钟前

视频里的效果我认为是用的“Screen Studio”录制的，可能软件可以实现这样的效果，就像截图工具“CleanShot X”一样，会有裁剪成边和加背景等效果。而实际它上贴着网页边缘录屏而已（我软件试用过期了，没有实际验证）

9

ysc3839

4 小时 25 分钟前 via Android

1

用 Electron 或者类似项目创建个无边框窗口即可

10

kuanat

4 小时 22 分钟前

我只用 Linux 所以只能提个思路，这个功能在 linux 异常简单。

现代桌面的窗口管理器的渲染逻辑是基本一致的，就是分配给应用程序一个矩形空间，由应用程序决定窗体内部的内容，然后窗口管理器（合成器）负责将其和标题栏部分合成起来。换个说法，标题栏不是应用程序决定的。

为了支持特定形态的窗体，一般桌面的窗口管理器也会提供一个叫 client side decoration 的机制，这样窗体相关的部分也交由应用程序负责。可以参考 https://en.wikipedia.org/wiki/Client-side_decoration

所以要实现这个功能一方面需要窗口管理器支持，另一方面要程序自身去适配 csd 机制。

如果只是单纯实现录屏的时候不含窗体，计算好坐标裁剪一下应该没问题。

11

evan9527

4 小时 12 分钟前

看看 MenubarX 是否满足

12

MrGba2z

4 小时 4 分钟前

1

如果是自己的网站的话
做 PWA 支持
然后在 manifest 里定义 borderless 模式
https://github.com/WICG/manifest-incubations/blob/gh-pages/borderless-explainer.md#manifestjson

（但一般是给本身自带 menu 的网站用的）

13

HeyWeGo

3 小时 57 分钟前

2

windows 下，这是 chrome 的无边框模式，运行如下命令即可：

"C:\Program Files\Google\Chrome\Application\chrome.exe" --chrome-frame --app=https://www.v2ex.com

我把 chatgpt 等工具类网站都弄了个这种运行模式

14

HeyWeGo

3 小时 55 分钟前

在没有辅助软件的情况下，浏览器能做到的应该就这样了。否则只能自己写点小小软件实现了

15

littleshy

3 小时 53 分钟前

我喜欢用 chrome 的 --app 参数创建一堆快捷方式打开浏览器，不过无法到全部无边框，还是会有一个标题栏。

16

Takashi123

3 小时 49 分钟前

Chrome 的一个插件，还是有个关闭的菜单栏

17

Takashi123

3 小时 49 分钟前

@Takashi123 https://chromewebstore.google.com/detail/separate-window/cbgkkbaghihhnaeabfcmmglhnfkfnpon

18

Livid

MOD

OP

3 小时 48 分钟前

Edge App 的效果：

如果能够把最上面的那两栏去掉就好了。

我先试试 manifest 能够做到什么程度。

19

NessajCN

3 小时 33 分钟前

zen browser
compact mode

20

hguandl

3 小时 15 分钟前

1

可以简单粗暴地实现一个 WKWebView ，然后把标题工具栏去掉。但是副作用是整个窗口都是网页，甚至无法移动位置了。

https://imgur.com/a/pUKUzna

21

1145148964

3 小时 11 分钟前

powertoy 好像有个窗口剪裁

22

sleepm

3 小时 5 分钟前

https://github.com/Codeusa/Borderless-Gaming
除了好看没啥了
没了边框，不能双击放大，快捷键放大

23

wow0o

3 小时 3 分钟前

@ThinkMan #2 arc 起新服了。不玩了

24

mgrddsj

3 小时 1 分钟前

1

如果你有 Firefox 的话，试试下面这个 Reddit 帖子里的方法：
https://www.reddit.com/r/FirefoxCSS/comments/lhoh0b/is_there_a_way_to_hideshow_all_ui_elements_and/

实测效果：

25

evan9527

2 小时 59 分钟前

flotato

26

hguandl

2 小时 55 分钟前

1

#20 移动问题也解决了，在上面加了个透明层。

Demo:

27

mgrddsj

2 小时 52 分钟前

1

如果你偏好 Chromium 系的浏览器，那么 Vivaldi 也可以做到，只需要开启 Vivaldi 的允许修改 CSS 开关，并添加以下帖子里的 CSS ，再 "Hide UI" (Ctrl/Command + F10)，即可做到下图效果。
（某个版本的 Vivaldi 转向使用原生红绿灯按钮，使其无法被隐藏，Windows 上应该没有这个问题）
https://www.reddit.com/r/vivaldibrowser/comments/nbgjtq/how_to_remove_the_title_bar/