为什么我的复选框在移动设备上的行为与在台式电脑上不同？

Question

我有一个 Blazor Wasm 应用程序，它在台式电脑上按预期工作，但在移动设备上表现“奇怪”。我创建了一个 Blazor 小提琴，这里。
只需单击复选框即可。您会看到，它们的作用就像单选按钮。这就是我想要的。现在，

• 进入开发工具
• 模拟移动设备（CTRL + Shift + M）
• 激活复选框“一”
• 将“光标”不完全移动到“one”的垂直中心，而是稍微低一点。保持在“一”以内
• 再次单击，看到“一”被取消选择，“二”被选中
• 不要移动光标，在完全相同的位置再次单击，看到现在“one”被选中了
• 单击，单击，单击...在完全相同的位置在“一”和“二”之间切换

我做错了什么？我什至做错了什么吗？我的意思是，它在台式电脑上按预期工作。

Answer 1

如此处所述，在移动设备上，如果元素尺寸较小，触摸目标尺寸会自动增加到48x48dp。这正是上面示例中发生的情况。如果未禁用某个复选框，则第二个复选框的目标大小不会扩展为与第一个复选框重叠，但如果第一个复选框被禁用并因此不可单击，则第二个复选框的目标大小会扩展。