size属性只控制浏览器按当前字体大致显示多少个等宽字符，不控制像素宽度；其实际渲染宽度受font-family、font-size、缩放比例及浏览器实现影响，三端差异可达10px以上。
size属性到底控制什么
它不控制像素宽度，只告诉浏览器“按当前字体大致显示多少个等宽字符”。size="20" 的实际渲染宽度取决于 font-family、font-size、缩放比例甚至浏览器实现——Firefox 偏向按 monospace 估算，Chrome 在 sans-serif 下会压缩间距，Safari 则依赖系统字体度量。同一段代码在三端可能差出 10px 以上。
常见错误是把 size="30" 当作 300px 用，结果在移动端输入框溢出容器，或响应式断点下突然变窄。
-
size值必须是纯整数，不能带单位（size="20px"无效） - 对
type="text"、type="search"有效；type="password"因掩码字符渲染差异，视觉宽度常略小 - 与
maxlength完全无关：一个管“看得见多少”，一个管“最多输几个” - 未显式设置时，浏览器默认值通常是 20，但不可依赖
CSS width 才是真正可控的方案
要让输入框稳定占满父容器、固定为 240px、或随视口缩放，唯一可靠方式是 width 配合 box-sizing: border-box。否则 padding 和 border 会让内容区被撑窄，导致用户误判可输入长度。
直接内联写法虽快，但维护性差：<input style="width: 240px; box-sizing: border-box;">。更推荐类名管理：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
.form-input {
width: 100%;
max-width: 400px;
box-sizing: border-box;
}
- 响应式场景下，
width: 100%比任何size值都稳定 - 若同时设
size和width，现代浏览器中 CSS 总是覆盖size的视觉效果，但size仍留在 DOM 中，可能干扰旧脚本逻辑 - 绝对不要写
<input size="50" style="width: 200px;">—— 冗余且易引发调试困惑
什么时候还可能用到 size
真实项目里，size 已基本失去实用价值。仅在两类边缘场景中还有残留意义：
- HTML 邮件模板：部分客户端（如 Outlook Desktop）禁用或忽略外部/内联 CSS，此时
size是唯一能触发简单宽度估算的原生属性 - CLI 工具生成的简易 HTML 报告：追求零样式依赖，接受“字符数估算”的模糊性
除此之外，建议一律删掉 size 属性。它不会提升可访问性（屏幕阅读器读出 size="30" 对用户无实质帮助），也不影响表单语义，只增加理解成本和跨环境不一致风险。
调试时最容易忽略的一点
在 DevTools 中检查 <input> 的 computed styles，重点看 width 的最终值是否为 auto。如果是，说明 size 正在起作用——但你无法预测它算出来的是多少像素，也无法通过媒体查询调整它。这时候别改 size，去查 CSS 是否漏写了 width 或被更高优先级规则覆盖了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
