如何让HTA的复选框和单选按钮适配屏幕缩放比例？

HTA依赖IE渲染引擎，原生复选框、单选按钮属于系统原生控件，默认继承系统DPI设置，不会自动跟随页面缩放逻辑调整。可以通过以下两种方法解决：

方法一：自定义CSS样式完全控制控件外观 #

通过CSS伪元素自定义复选框和单选按钮的样式，摆脱系统原生控件的限制，让尺寸随页面缩放比例自适应：

修改原HTA的<style>部分为：

body {
  background-color:LemonChiffon;
  font-family:Segoe UI;
  font-size:11pt;
  transform-origin: 0 0;
}

/* 自定义复选框样式 */
input[type="checkbox"] {
  position: relative;
  width: 1.2em;
  height: 1.2em;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #666;
  border-radius: 3px;
  vertical-align: middle;
}

input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.9em;
  color: #333;
}

/* 自定义单选按钮样式 */
input[type="radio"] {
  position: relative;
  width: 1.2em;
  height: 1.2em;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #666;
  border-radius: 50%;
  vertical-align: middle;
}

input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.6em;
  height: 0.6em;
  background-color: #333;
  border-radius: 50%;
}

这种方法完全脱离系统控件限制，样式和尺寸可随页面字体大小、缩放比例同步变化，兼容性较好。

方法二：通过VBScript获取系统缩放比例动态调整控件尺寸 #

利用screen.deviceXDPI和screen.logicalXDPI获取系统DPI缩放比例，动态设置复选框和单选按钮的尺寸：

在原VBScript代码后添加以下内容：

' 获取系统DPI缩放比例
scaleRatio = screen.deviceXDPI / screen.logicalXDPI

' 调整复选框和单选按钮的尺寸
document.getElementById("cb1").style.width = 16 * scaleRatio & "px"
document.getElementById("cb1").style.height = 16 * scaleRatio & "px"
document.getElementById("rb1").style.width = 16 * scaleRatio & "px"
document.getElementById("rb1").style.height = 16 * scaleRatio & "px"
document.getElementById("rb2").style.width = 16 * scaleRatio & "px"
document.getElementById("rb2").style.height = 16 * scaleRatio & "px"

该方法保留原生控件外观，仅调整尺寸适配缩放，但部分系统环境下可能存在兼容性问题。

完整修改后的HTA示例（方法一） #

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=9">
<script language="VBScript">
x = screen.availWidth * 1/3 'use one third of the available width
y = screen.availHeight * 3/4 'use three quarters of the available height
Window.ResizeTo x, y
Window.MoveTo (screen.availWidth - x)/2, (screen.availHeight - y)/2 'Center
</script>
<style>
  body  {
    background-color:LemonChiffon; 
    font-family:Segoe UI; 
    font-size:11pt;
    transform-origin: 0 0;
  }

  /* 自定义复选框 */
  input[type="checkbox"] {
    position: relative;
    width: 1.2em;
    height: 1.2em;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #666;
    border-radius: 3px;
    vertical-align: middle;
  }

  input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.9em;
    color: #333;
  }

  /* 自定义单选按钮 */
  input[type="radio"] {
    position: relative;
    width: 1.2em;
    height: 1.2em;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #666;
    border-radius: 50%;
    vertical-align: middle;
  }

  input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.6em;
    height: 0.6em;
    background-color: #333;
    border-radius: 50%;
  }
</style>
</head>
<body>
  <h1>Heading 1</h1> Body text
  <h2>Heading 2</h2> Body text
  <h3>Heading 3</h3> Body text<br><br>
  <input type=button value="Button"><br>
  <input type=checkbox id=cb1>Check box<br>
  <input type=radio id=rb1 name=test><input type=radio id=rb2 name=test>Radio buttons<br>
</body>
</html>

内容的提问来源于stack exchange，提问作者LesFerch