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

[NGPONG]

比如说我恒定的设置一个应用的窗口大小为 800 * 800，在分辨率小的情况下我会看到这个应用占用屏幕比例很多，但是一换到高分辨率的情况下这个窗口的大小就会缩小了，我的目的是不管在什么分辨率的情况下，这个窗口的大小就直观来说还是一样的大小不变的，我的理解应该是这个窗口的 长 * 某个半分比 宽 * 某个百分比 来根据不同的分辨率来改变窗口的长和宽以来达到效果，但是我却不知道该如何计算这个 百分比

上张图吧，大家或许能够更好地理解一点

ht 占 tp 位 s://i.loli.net/2019/10/16/CQc5zS8Fk7HZprL.png

[janus77]

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

[liuxey]

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

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

[ceet]

不错

[NGPONG]

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

[markgor]

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

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

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

[NGPONG]

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

[lululau]

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

[otakustay]

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

[NGPONG]

@lululau XD

[markgor]

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

[jorneyr]

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

[NGPONG]

@markgor

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

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

[markgor]

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

[NGPONG]

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

[markgor]

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

[markgor]

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

[EmptyName]

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

[VictorJing94]

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

[NGPONG]

@markgor
是相对坐标取

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

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

[Junn]

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

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

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