如何让一个窗口的大小能够在不同的分辨率下都能够维持肉眼看上去的同一大小

窗口

大小

分辨率

百分比

52 条回复 • 2019-10-17 16:03:21 +08:00

1

shoaly

2019-10-16 09:20:29 +08:00

2

老哥去搜一下, 屏幕尺子, 他们要实现的就是所有屏幕上都能显示出一把尺子. 根据像素和点距去换算的

2

TimFire

2019-10-16 09:23:44 +08:00

你可以试试改变分辨率，桌面图标大小会改变吗？再比如说，你换个迷你小型显示器？应用窗口还是 800*800 大小吗？明显不会，只能自适应屏幕。

3

andychen20121130

2019-10-16 09:25:53 +08:00

你要用点用相对位置

4

NGPONG

OP

2019-10-16 09:26:04 +08:00

@TimFire
你说的这个问题我明显是试验过才来 V2EX 上提问的

感谢提供了一个方向 @shoaly 不过或许有现成的代码参考或许会更好呢，比较赶时间

5

fancy111

2019-10-16 09:26:54 +08:00

你可能没搞清楚 800*800 这个就是代表分辨率。
你想实现你图中的效果也很容易，只要直接写死像素值，不随屏幕放大即可。

6

mx1700

2019-10-16 09:28:57 +08:00 via Android

1

获取显示器分辨率，再获取物理尺寸，自己算比例

7

NGPONG

OP

2019-10-16 09:29:12 +08:00

@fancy111 我认为你们可能都没理解我表达的意思，你可以试试一个应用我写死 800 x 600 的 size，记住显示在屏幕上的具体的长宽（用尺子量），然后放在高分辨率的屏幕上看看这个应用还是不是刚刚用尺子量的长和宽了

8

uppu

2019-10-16 09:30:19 +08:00

有一个笨办法，每个分辨率下窗口大小设置好，然后根据分辨率调整大小。

9

NGPONG

OP

2019-10-16 09:31:51 +08:00

@uppu 是的，这不失是一种途径，感谢，但是应用来说是面对过大群众，他们不单单是分辨率奇形怪色，还可能是 windows 缩放也会奇形怪色，比如说有些高分屏是 125%的缩放，这都会直接的影响到这个应用显示在屏幕上肉眼可观测的大小的

10

tempdban

2019-10-16 09:32:32 +08:00 via Android

找到 dpi，换算

11

zhanglihow

2019-10-16 09:33:37 +08:00

百分比不就是（当前屏幕分辨率 /你最开始的分辨率）

12

zycojamie

2019-10-16 09:35:10 +08:00

2

我是结合 rem，根据窗口大小动态改变 font-size 的

13

NGPONG

OP

2019-10-16 09:35:45 +08:00

@zhanglihow 昨晚睡觉的时候想到的这种，正准备试验 : )

14

yoshiyuki

2019-10-16 09:35:49 +08:00

参考屏幕尺子，必须由用户主动上报屏幕尺寸才有可能，软件端一般无法获取精确的尺寸，虽然系统有这个 API 但是不可靠

15

NGPONG

OP

2019-10-16 09:36:20 +08:00

@zycojamie 感谢提供参考

16

KillPaul

2019-10-16 09:46:28 +08:00

@zhanglihow 这样的话是不是像 iMac 这种视网膜的情况又不一样了呢
@NGPONG

17

KillPaul

2019-10-16 09:47:29 +08:00

@zhanglihow 而且你这种情况应该只适用于两台屏幕尺寸一模一样的设备吧

18

learnshare

2019-10-16 09:54:08 +08:00

用绝对（物理）尺寸，cm/mm/in/pt 这种

19

fancy111

2019-10-16 09:55:41 +08:00

1

@NGPONG 你这个涉及到两个数据，一个是屏幕像素，一个是屏幕尺寸。17 寸屏和 19 寸屏同样设置 2K 分辨率的话，像素大小肯定不一样。所以要实现你的效果，只能靠手动计算。一般主流屏都是固定尺寸

20

NGPONG

OP

2019-10-16 10:02:18 +08:00

@learnshare 感谢，但不大理解你说的意思，可以再具体点吗

21

janus77

2019-10-16 10:06:19 +08:00

我可以告诉你一个事实
有 13 寸的 1080p 笔记本
全屏截图以后，把图片放到 1080p 的台式机屏幕（ 20 几寸的那种）上去，是可以完全合缝的
你要处理这个问题吗？

22

liuxey

2019-10-16 10:09:21 +08:00

我觉得靠 HTML 相关 API 很难实现，比如一台 13 寸的 1080P 和 27 寸的 1080P 要实现一样大小框

要获取到硬件参数，比如显示器的尺寸宽高，再加上分辨率才可以动态计算出你的框框应该要多大

23

ceet

2019-10-16 10:11:29 +08:00

不错

24

NGPONG

OP

2019-10-16 10:14:16 +08:00

@liuxey 是的，这个就是我想要达到的最终效果，口齿不够伶俐，总说不出想要的玩意，其实说白了我就是想要代码 : )

25

markgor

2019-10-16 10:19:33 +08:00

1、肉眼看上去一樣。
CSS 不是有個百分比嗎？

另外你的提問已經有問題了，
一開始需要不同分辨率裡面顯示的實際效果高寬是一樣的，
後面的需要就變成了無論如何大小不變。

在不同分辨率實際顯示效果高寬一致的情況下，他只能根據比例進行等比縮放，進行縮放後的尺寸肯定變大 /小了。

26

NGPONG

OP

2019-10-16 10:26:13 +08:00

@markgor
1. 并不是使用 CSS 写的，但是我提出这个问题的根源就犹如你说的最后一句话 CSS 可以根据半分比等比缩放导致的 XD
2. 无论如何大小不变的情况是针对肉眼看上去的，而不是这个窗口的 size，你可能理解错了吧

27

lululau

2019-10-16 10:30:01 +08:00

肉眼看上去一样？调整眼睛到屏幕的距离啊

28

otakustay

2019-10-16 10:31:34 +08:00

物理尺寸是不可能的，极端点比如投影仪
百分比可以考虑，但同分辨率的屏幕不一定是一样大的，21-32 寸都有可能

29

NGPONG

OP

2019-10-16 10:32:26 +08:00

@lululau XD

30

markgor

2019-10-16 10:40:21 +08:00

1

@NGPONG 好的，其實問題的核心應該是物理尺寸和屏幕像素的轉換關係吧？
你沒說是用什麼寫的，我權當 css 吧，
在不同分辨率下，顯示效果的物理尺寸相同，實現的方式只能靠百分比進行了，(當然，你獲取屏幕 dpi 和分辨率後進行換算，其實和百分比實現的方式是一樣的)。但是文字等比放大的問題你怎麼處理？而且這樣設計出來的界面會很彆扭，為什麼彆扭？因為你的素材肯定要選個固定像素的吧？我當你選擇 2K 的素材，那麼去到 4K 的時候，你的素材是進行了等比放大，換句話說就是毛孔都出來了，另外還要考慮寬屏和正屏的問題。然後你會想那我就直接用 4k 作為素材，此時如果用戶是 800*800 的屏，那你上面的文字是縮小到有多小啊？
我不知道你是用什麼設計界面，
但是在 css 裡有個媒體查詢，根據不同的分辨率進行不同的匹配。
偷懶點的做法還可以設定一個像素固定值，屏幕大的兩邊空，小過固定值的就滾動，保持用戶看到的就是設計者當初設計的模樣。

31

jorneyr

2019-10-16 10:54:08 +08:00

1

Mac OS 已经从系统上解决好这个问题了，写死的 800px，在 Retina 和非 Retina 屏幕下都是一样大的，期待 Windows 也能够解决。

32

NGPONG

OP

2019-10-16 11:15:11 +08:00

@markgor

感谢耐心解答，打的字很多，看完了（这繁体看的有点吃力，翻译过来看的 XD ）

关于文字放大或缩小的问题，如你所说确实是存在的，但是本身我的需求并不是想在我的应用上显示出来，而是截取别人的网页，具体点来说的话就是我做的是 OCR，截取当前浏览器所显示的内容（截取功能由 selenuim 提供出来）并在相应的坐标读取一些内容，但是就我实际开发过程的时候遇到的问题就是，两部电脑，不同的分辨率和屏幕尺寸，就算我设置启动的浏览器窗口的大小是恒定的（就假设 width:1000 heigh:1000 吧），但是截图出来的图片大小最终还是会有变化的，琢磨了一个晚上我猜测是不是因为我现在在 V2 上所发表的这个问题所导致的，所以说一切的讨论都只是我的一个试验性的进行。并不是一个扎实的前端 er，你刚刚所提到的 CSS 所提供的媒体查询的问题我刚刚也查询了一下，但是我实际也没用过，或许说这个网页已经支持了这种样式的情况下，那我还根据分辨率+屏幕尺寸去调整浏览器的 size 的话，是不是还是无法达到我想要的效果呢？所以你提出的这个点让我在上面所说的 `"假设"` 更加没什么信心了

33

markgor

2019-10-16 11:23:15 +08:00

@NGPONG 我也不是一個扎實的前端，只是有段時間因為某些原因所以接觸過。
我當時遇到的問題和你現在的問題差不多，但我們需求不一致。
媒體查詢：根據不同分辨率設備設置不同的樣式。等於一個網頁根據不同分辨率就寫一次，具體些多少次要看你適配的精度。適配精度越高，寫的 CSS 越多。
“具体点来说的话就是我做的是 OCR，截取当前浏览器所显示的内容（截取功能由 selenuim 提供出来）并在相应的坐标读取一些内容。”
大致明白你要做什麼，類似腳本的外掛對屏幕定位讀取血條計算百分比是否需要吃紅吧？
selenuim 說實話不熟悉，不清楚你實際需求，但根據你所說的，會不會用 electron 寫，注入 JS 進行定位你需要的目標 dom，然後提取出來進行 OCR 識別會方便一點呢？

34

NGPONG

OP

2019-10-16 11:28:41 +08:00

@markgor 因为这个网页是一个 h5 game，都是在 `<canvas>` 中呈现出来的，就是在 dom 中获取不到的，所以我就只能根据坐标点，但是根据坐标点的话就犹如我上一条回复所说，不同分辨率下导致的截图大小不一致了，这时候我再按原来的坐标再去取可能就会失败了

35

markgor

2019-10-16 11:32:30 +08:00

可是你可以用相對坐標獲取吧？
selenuim 真的不熟悉，
如果是 electron 的話，直接 set 絕對的寬高（像素），
然後通過 set 好了的寬高像素進行相對定位。
那樣無論去到什麼屏幕你提取出來的都一樣。

36

markgor

2019-10-16 11:35:39 +08:00

這麼說吧，
假設你的瀏覽器高度寬度固定值是 800 *600 像素
那麼你去到 2K，4K 屏幕也好，你的像素永遠是 800*600
然後根據相對的尺寸（瀏覽器內文距離頂部 X 截圖到瀏覽器內文距離右邊的 Y ）截圖
出來的結果就不會受到你電腦的分辨率影響。

37

EmptyName

2019-10-16 11:38:00 +08:00 via Android

只要处理好分辨率和 ppi(PixelPerInch)这两个概念就行吧？
相当于你想要的是物理尺寸，在每个设备上需要用一定方式获取屏幕的 ppi，然后换算成像素就是窗口的分辨率

38

VictorJing94

2019-10-16 11:42:58 +08:00

我用 winform 做过类似的,抓 screen 的宽高,然后按比例换算我记得,win 有个 Screen 类

39

NGPONG

OP

2019-10-16 11:50:37 +08:00

@markgor
是相对坐标取

"假設你的瀏覽器高度寬度固定值是 800 *600 像素
那麼你去到 2K，4K 屏幕也好，你的像素永遠是 800*600
然後根據相對的尺寸（瀏覽器內文距離頂部 X 截圖到瀏覽器內文距離右邊的 Y ）截圖
出來的結果就不會受到你電腦的分辨率影響。"

reply：然而就实际开发的时候发现，并不是如此

40

Junn

2019-10-16 11:58:57 +08:00

1

不同显示器，点距不同，即表示一个像素点的物理尺寸是不同的。

比如在一台 22 寸 1920 分辨率的显示器上，点距大概是 0.282mm，你设置一个应用窗口 800px，物理尺寸即为 0.282*800=225.6mm 。
然后你需要在另一台显示，也看到物理尺寸为 225.6mm ，则需知道另一台显示的点距，比如 25 寸 2K 显示器，点距为 0.216mm，则需要设置为 225.6/0.216=1044px，才能看上去一致。

至于点距怎么算，拿物理尺寸和分辨率就能算了。

41

learnshare

2019-10-16 12:03:18 +08:00

1

@NGPONG 我实测下来是不行的，写了很多年也没用过这种单位
10cm 宽的矩形，在两个分辨率相同但点距不同的设备上，分别显示为 8.8cm 和 8.2cm

42

NGPONG

OP

2019-10-16 13:37:13 +08:00

@Junn 非常的清晰，感谢！

43

DejaVud

2019-10-16 14:34:52 +08:00

windows 桌面开发有相关指南,叫 DPI Awareness
https://docs.microsoft.com/en-us/windows/win32/hidpi/high-dpi-desktop-application-development-on-windows
你可以参考一下

DPI Unaware
DPI unaware applications render at a fixed DPI value of 96 (100%). Whenever these applications are run on a screen with a display scale greater than 96 DPI, Windows will stretch the application bitmap to the expected physical size. This results in the application appearing blurry.
所以在高分辨率下,很多不支持 DPI Awareness 的旧桌面程序打开,使用的仍是小尺寸的位图,结果就被系统强行拉伸,造成模糊(blurry).
要支持 DPI Awareness 就要给程序不同尺寸的位图,来适配不同大小的分辨率.REF 里列出了需要用到的 API.

44

NGPONG

OP

2019-10-16 19:47:15 +08:00

@DejaVud 谢谢提供的意见，也是非常具有参考和突破性的 XD

45

NGPONG

OP

2019-10-16 22:30:50 +08:00

@Junn

```csharp
int SH = Screen.PrimaryScreen.Bounds.Height;
int SW = Screen.PrimaryScreen.Bounds.Width;
```

46

NGPONG

OP

2019-10-16 22:35:03 +08:00

@Junn

我按照你的方法来计算的话，实际拿尺子出来测量还是偏差 0.5cm
下面是我的代码（计算点距的公式是从在线 ppi 计算中拷出来的）

```csharp
int width = Screen.PrimaryScreen.Bounds.Height;
int height = Screen.PrimaryScreen.Bounds.Width;

double ratio = height / width;
double widthD = Math.Sqrt(Math.Pow(diag, 2) / (1 + Math.Pow(ratio, 2)));
double dotPitch = 25.4 / (width / widthD);

double dopi = Math.Round(dotPitch * 10000) / 10000;
double metricDiag = diag * 2.54;
```

47

NGPONG

OP

2019-10-16 22:48:16 +08:00

@learnshare 感谢测量，我计算出来的结果如 46 楼，相差了 0.5cm 跟你是一个差值，我考虑的是难不成所有显示器就是这个差值了吗，明天回公司多拿几台显示器试下

48

Junn

2019-10-17 00:07:15 +08:00

@NGPONG #46 看代码没啥问题啊，实际计算时，屏幕尺寸有量过么？会不会是显示器标称的尺寸与实际尺寸的误差所致？

49

NGPONG

OP

2019-10-17 08:21:22 +08:00 via Android

@Junn 是，昨晚还没把这个问题考虑到，回公司找找尺子去

50

ragnaroks

2019-10-17 08:45:43 +08:00

误差猜测是因为屏幕虚标...比如 23.8"的说自己是 24"

51

silencefent

2019-10-17 09:12:46 +08:00

做不到,极端条件:VR 上的显示屏,能做到 1 寸 4K 分辨率,这时候分辨率作为参照系就没有意义了

52

dosmlp

2019-10-17 16:03:21 +08:00

可以获取系统 dpi 然后根据不同的情况做适配