移动端td内input元素不可见问题求助（数独项目）

以下是针对移动端输入框显示异常问题的具体修复步骤：

• 配置正确的视口标签
  移动端页面必须添加合适的viewport meta标签，否则会出现页面缩放、元素错位问题。在HTML的<head>中插入：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  

• 重置输入框的移动端默认样式
  移动端浏览器会给<input>元素添加默认内边距、边框、圆角及点击高亮，导致和PC端样式偏差。用CSS统一重置：

  td input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: inherit;
    background-color: transparent;
    color: inherit;
  }
  

• 实现响应式九宫格布局
  确保9×9表格在移动端自适应屏幕，同时保持单元格正方形比例：

  .sudoku-table {
    width: 100%;
    max-width: 450px; /* 限制最大宽度，避免大屏过度拉伸 */
    margin: 0 auto;
    border-collapse: collapse;
  }
  .sudoku-table td {
    width: calc(100% / 9);
    padding: 0;
    border: 1px solid #333;
    text-align: center;
    position: relative;
  }
  /* 用padding-bottom实现正方形单元格 */
  .sudoku-table td::after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }
  /* 让输入框填满整个单元格 */
  .sudoku-table td input {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  

• 优化移动端输入体验
  针对数字输入场景，配置合适的input类型，避免弹出全键盘，同时限制输入内容为1-9：

  <input id="cell_${rowIndex}_${colIndex}" type="tel" inputmode="numeric" maxlength="1" pattern="[1-9]">
  

  配合JavaScript做输入校验：

  document.querySelectorAll('.sudoku-table input').forEach(input => {
    input.addEventListener('input', () => {
      input.value = input.value.replace(/[^1-9]/g, '');
    });
  });
  

• 消除触摸点击延迟
  移动端默认的300ms点击延迟可能导致交互异常，通过CSS优化：

  td, td input {
    touch-action: manipulation;
  }
  

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