docs: Implement rem-based DPI scaling and format documentation table by wysaid · Pull Request #12 · x-ege/ege-installer

wysaid · 2026-02-09T19:10:00Z

What

Refactor DPI scaling implementation to use rem-based CSS with dynamic font-size adjustment,
and convert the scaling examples table to Markdown format for better documentation clarity.

Why

The previous approach had layout overflow and maintenance issues. The rem-based solution
leverages \screen.width\ (logical resolution) to uniformly scale both window size and CSS
content, providing consistent DPI-awareness across all resolution DPI combinations without
requiring multiple CSS files or hardcoded breakpoints.

How

Documentation: Convert text-based table to Markdown table for better rendering
CSS (setup.hta): Convert all px-based sizes to rem units (except 1px borders)
JavaScript (ui.js):
- Change \scaleFactor\ minimum from 1.0 to 0.75 for better DPI-scaled screen support
- Calculate and apply dynamic root font-size: \14 scaleFactor\ via \html.style.fontSize`n - Window and CSS scale together by the same factor
Strategy: Single formula covers all resolution DPI combinations with zero maintenance overhead

Testing

Verified on 1080p/2K/4K displays with various DPI settings (100%, 125%, 150%, 200%)
Scaling table demonstrates layout proportionality across all combinations
Ctrl+Wheel fine-tuning still available as per user expectation
IE 9+ compatibility maintained (rem units widely supported)

Summary by CodeRabbit

改进

优化了界面缩放策略，采用新的动态缩放机制，确保应用在不同屏幕分辨率和DPI设置下能获得更好的显示效果。
更新了界面排版系统，使文本、间距和UI元素能够更均匀地随屏幕配置进行缩放，提升了跨设备适配性。

… implementation - Convert text-based table to Markdown table in DPI scaling documentation - Clarify rem-based CSS + dynamic font-size implementation strategy - Update code examples with new scaling formula (min 0.75 factor) - Document compatibility with IE 9+ and Ctrl+Wheel fine-tuning - Refactor HTA CSS to use rem units for cross-resolution DPI awareness - Update JavaScript to apply dynamic root font-size scaling

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

coderabbitai · 2026-02-09T19:12:46Z

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

 ____________________________________________________________________________________________________________________________________________________________________
< Use blackboards to coordinate workflow. Use blackboards to coordinate disparate facts and agents, while maintaining independence and isolation among participants. >
 --------------------------------------------------------------------------------------------------------------------------------------------------------------------
  \
   \   \
        \ /\
        ( )
      .( o ).

_{✏️ Tip: You can disable in-progress messages and the fortune message in your review settings.}

Tip

You can disable sequence diagrams in the walkthrough.

Disable the reviews.sequence_diagrams setting to disable sequence diagrams in the walkthrough.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch docs/dpi-scaling-table-and-implementation

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai · 2026-02-09T19:13:03Z

Walkthrough

该PR将DPI缩放策略从模拟/变换/缩放方案改为基于rem的统一方案，引入单一的scaleFactor（基于屏幕宽度）驱动动态根字体大小，并相应更新文档、样式和JavaScript逻辑。

Changes

Cohort / File(s)	Summary
DPI缩放策略文档 `docs/dpi-scaling-impl.md`	替换emulation/zoom/transform的叙述，改为rem-based方案说明；引入scaleFactor计算(max(0.75, screen.width / 1920))；删除旧的失败解决方案引用。
UI样式转换 `src/setup.hta`	系统性转换px单位到rem；更新padding、margin、font-size、border-radius等；调整模态框和卡片尺寸为可缩放的rem基准；保留布局结构，仅样式量化改变。
缩放逻辑实现 `src/ui.js`	更新scaleFactor计算从max(1, screen.width / 1920)改为max(0.75, screen.width / 1920)；计算并应用rootFontSize到document.documentElement；删除旧的缩放方法代码路径；更新文本大小为rem单位。

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Simplify DPI scaling: use native Ctrl+Wheel instead of emulation #6: 在同一DPI缩放区域进行修改，同样删除emulation/zoom方案并采用更简洁的缩放方法。

Suggested labels

documentation, enhancement

Poem

🐰✨ 像素变成相对流，
屏幕宽度来掌舵，
rem字体轻盈走，
最小缩放零点七五，
缩放策略焕新生！

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	标题准确反映了变更集的主要内容：实现rem为基础的DPI缩放和格式化文档表格，这与三个文件的更改（文档、样式和脚本）完全相关。
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch docs/dpi-scaling-table-and-implementation

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

src/setup.hta (1)

930-930: 大量内联样式使用 rem 单位，建议后续提取为 CSS 类。

整个文件中有大量内联 style 属性（如此处及模态窗口中的 font-size、margin、padding 等），虽然本次 PR 的 px→rem 转换是正确的，但这些重复的内联样式增加了维护成本。建议后续迭代中将常用样式组合提取为 CSS 类。

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

augmentcode · 2026-02-09T19:16:26Z

🤖 Augment PR Summary

Summary: Refactors the installer’s DPI scaling to use rem-based CSS with a dynamically adjusted root font-size, and updates the DPI scaling documentation for clarity.

Changes:

docs/dpi-scaling-impl.md: rewrote the implementation section, added rationale/comparison, and converted the scaling examples to a Markdown table
src/setup.hta: converted most fixed px sizes to rem (keeping 1px borders) and added an html { font-size: 14px; } baseline
src/ui.js: computes scaleFactor = max(0.75, screen.width / 1920), applies it to the initial window size, and sets document.documentElement.style.fontSize to drive rem scaling
Minor UI inline styles updated to rem where applicable (e.g., empty-state message)

Technical Notes: Designed to keep IE=edge/HTA compatibility while retaining Ctrl+Wheel zoom as an optional fine-tuning mechanism.

_{🤖 Was this summary useful? React with 👍 or 👎}

augmentcode

Review completed. 2 suggestions posted.

Comment augment review to trigger a new review at any time.

augmentcode · 2026-02-09T19:16:29Z

src/ui.js

+  var scaleFactor = Math.max(0.75, screen.width / 1920);
+
+  // 设置 rem 基准字号：CSS 全部使用 rem 单位，随此值等比缩放
+  var rootFontSize = Math.max(10, Math.round(14 * scaleFactor));


rootFontSize is rounded (Math.round(14 * scaleFactor)), so the effective CSS scale becomes rootFontSize/14 and can diverge from scaleFactor (e.g., 1.333 → 19px ≈ 1.357). This means the claim that window and CSS “scale together by the same factor” may not hold exactly and could cause small layout proportionality drift.

Severity: low

_{🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.}

augmentcode · 2026-02-09T19:16:29Z

docs/dpi-scaling-impl.md

+| --- | --- | --- | --- | --- | --- | --- |
+| 1080p | 100% | 1920 | 1.000 | 14px | 860×720 | 860×720 |
+| 1080p | 125% | 1536 | 0.800 | 11px | 688×576 | 860×720 |
+| 1080p | 150% | 1280 | 0.750 | 11px | 645×540 | 968×810 |


In this scaling table, scale=0.750 but font=11px, which corresponds to ~0.786× of the 14px base due to rounding. It may be worth clarifying in the docs that font/window scaling is approximate when fontSize is rounded to whole pixels.

Severity: low

Other Locations

docs/dpi-scaling-impl.md:120

docs/dpi-scaling-impl.md:122

_{🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.}

Copilot AI review requested due to automatic review settings February 9, 2026 19:10

Copilot AI reviewed Feb 9, 2026

View reviewed changes

augmentcode bot reviewed Feb 9, 2026

View reviewed changes

wysaid merged commit 11bb5a6 into main Feb 9, 2026
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: Implement rem-based DPI scaling and format documentation table#12

docs: Implement rem-based DPI scaling and format documentation table#12
wysaid merged 1 commit intomainfrom
docs/dpi-scaling-table-and-implementation

wysaid commented Feb 9, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

coderabbitai bot commented Feb 9, 2026

Uh oh!

coderabbitai bot commented Feb 9, 2026 •

edited

Loading

Review ran into problems

Uh oh!

augmentcode bot commented Feb 9, 2026

Uh oh!

augmentcode bot left a comment

Uh oh!

augmentcode bot Feb 9, 2026

Uh oh!

augmentcode bot Feb 9, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

wysaid commented Feb 9, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Why

How

Testing

Summary by CodeRabbit

改进

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot commented Feb 9, 2026

Uh oh!

coderabbitai bot commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Poem

Review ran into problems

Uh oh!

augmentcode bot commented Feb 9, 2026

Uh oh!

augmentcode bot left a comment

Choose a reason for hiding this comment

Uh oh!

augmentcode bot Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

augmentcode bot Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

wysaid commented Feb 9, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Feb 9, 2026 •

edited

Loading