使用 iCheck - 移动设备的点击区域很小答案

【问题标题】：Using iCheck - Mobile has a tiny click area使用 iCheck - 移动设备的点击区域很小
【发布时间】：2015-09-07 20:26:50
【问题描述】：

所以，我正在使用 iCheck 创建漂亮单选按钮，但问题是它们在桌面上运行良好，但在移动设备上运行时，单选按钮有一个类似于 1px、1px 的点击框，这意味着我必须点击左上角，让他们注册点击。

这是我的原始 html：

<input class="doneckr" type="radio" name="donep2" value="didn">

这是输入在 iCheck 处理后呈现的方式：

<div class="iradio_square-red" style="position: relative;">
    <input class="doneckr" type="radio" name="donep2" value="didn" style="position: absolute; visibility: hidden;">
    <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 44px; height: 44px; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins>
</div>

这是我用来初始化 iCheck 处理器的代码：

$(document).ready(function(){
    $('.doneck').iCheck({
        checkboxClass: 'icheckbox_square-green',
        radioClass: 'iradio_square-green'
    })

    $('.doneckr').iCheck({
        checkboxClass: 'icheckbox_square-red',
        radioClass: 'iradio_square-red'
    })

    $('.donecke').iCheck({
        checkboxClass: 'icheckbox_square-orange',
        radioClass: 'iradio_square-orange'
    })
})

【问题讨论】：

标签： javascript jquery html mobile icheck

【解决方案1】：

44x44px 对于手指来说很小。查看here 以获得更大的上下文。你应该把它变大。它是内联 CSS，我假设它直接来自您的插件，这意味着您必须找到代码（也许它是某个地方的变量）。

另外，请确保包含

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

在您的标题 (example here) 中，以便在高分辨率 (retina) 设备上正确显示。他们有很多像素，所以要小心。

【讨论】：