Sudoku 网格中嵌入的 <input> 在桌面端正常显示，但在手机端缩放失衡、尺寸过小或完全不可见，根本原因在于传统表格（<table><td>）对表单控件的移动端渲染兼容性差，需改用现代 CSS Grid 布局并配合 viewport 设置与媒体查询实现真正响应式适配。
sudoku 网格中嵌入的 `` 在桌面端正常显示，但在手机端缩放失衡、尺寸过小或完全不可见，根本原因在于传统表格（`
| `）对表单控件的移动端渲染兼容性差，需改用现代 css grid 布局并配合 viewport 设置与媒体查询实现真正响应式适配。 在移动端，尤其是 iOS Safari 和部分 Android 浏览器中，<input> 元素嵌套在 <td> 内时，常因默认最小尺寸限制（min-width: auto）、字体缩放策略、表格单元格自动收缩行为以及未设置 viewport 导致渲染异常——表现为输入框“消失”、无法点击、文字溢出或高度塌陷（如题图所示）。单纯调整 font-size 或 padding 往往无效，关键在于重构布局模型并显式控制响应行为。 ✅ 推荐方案：弃用 <table>，采用语义清晰、控制力强的 CSS Grid 布局： <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Sudoku 响应式网格</title>
<style>
/* 基础重置与视口适配 */
* { box-sizing: border-box; }
.sudoku {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 2px;
border: 2px solid #333;
width: 100%;
max-width: 500px;
margin: 1rem auto;
background-color: #333;
padding: 2px;
}
.cell {
aspect-ratio: 1 / 1; /* 保持正方形，关键！ */
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(14px, 4vw, 20px); /* 响应式字体：最小14px，最大20px，中间随视口线性缩放 */
background-color: #fff;
position: relative;
}
.cell.empty {
background-color: #f5f5f5;
}
.cell input {
width: 100%;
height: 100%;
border: none;
outline: none;
text-align: center;
font-size: 100%; /* 继承父级 clamp 计算值 */
background: transparent;
color: #222;
font-weight: bold;
-webkit-appearance: none; /* 移除 iOS 默认样式 */
appearance: none;
}
/* 针对小屏设备增强可触控性 */
@media (max-width: 480px) {
.sudoku {
gap: 1px;
max-width: 400px;
}
.cell {
font-size: clamp(16px, 5vw, 22px);
}
.cell input {
min-height: 44px; /* 满足 iOS 最小触控目标建议 */
}
}
/* 可选：高亮宫格边界（3×3 子区域） */
.cell:nth-child(3n) { border-right: 2px solid #333; }
.cell:nth-child(9n) { border-right: none; }
.cell:nth-child(n+19):nth-child(-n+27),
.cell:nth-child(n+46):nth-child(-n+54) {
border-bottom: 2px solid #333;
}
</style>
</head>
<body>
<div class="sudoku">
<!-- 第一行 -->
<div class="cell empty"><input type="text" maxlength="1" inputmode="numeric" pattern="[1-9]"></div>
<div class="cell">8</div>
<div class="cell empty"><input type="text" maxlength="1" inputmode="numeric" pattern="[1-9]"></div>
<div class="cell empty"><input type="text" maxlength="1" inputmode="numeric" pattern="[1-9]"></div>
<div class="cell">7</div>
<div class="cell empty"><input type="text" maxlength="1" inputmode="numeric" pattern="[1-9]"></div>
<div class="cell empty"><input type="text" maxlength="1" inputmode="numeric" pattern="[1-9]"></div>
<div class="cell">6</div>
<div class="cell empty"><input type="text" maxlength="1" inputmode="numeric" pattern="[1-9]"></div>
<!-- 后续 8 行同理... -->
</div>
</body>
</html>? 关键要点说明：
? 额外建议： |
