发表新帖
发表新帖

Prevent iPhone from zooming in on `select` in web-app

前端 未结
关注
12 1218
春和景丽
春和景丽 2020-12-12 11:41

I\'ve got this code:
提交评论
  •  加载中...
  • 醉话见心
    2020-12-12 12:09

    I don't think you can't do anything about the behavior in isolation.

    One thing you can try is keep the page from zooming at all. This is good if your page is designed for the phone.

    <meta name="viewport" content="width=device-width" />

    Another thing you could try is using a JavaScript construct instead of the generic "select" statement. Create a hidden div to show your menu, process the clicks in javascript.

    Good luck!

    0 讨论(0)
  • 攒了一身酷
    2020-12-12 12:10

    iPhone's will zoom form fields slightly if the text is set to less than 16 pixels. I'd suggest setting the mobile form field's text to be 16 pixels and then override the size back down for desktop.

    The answers saying to disable zoom are unhelpful for partially sighted users may still want to zoom on smaller mobiles.

    Example:

    # Mobile first
input, textarea, select {
  font-size: 16px;
}

# Tablet upwards
@media (min-width: 768px) {
  font-size: 14px;
}
    0 讨论(0)
  • 青春惊慌失措
    2020-12-12 12:11

    Try this:

    function DisablePinchZoom() 
{
    $('meta[name=viewport]').attr("content", "");
    $('meta[name=viewport]').attr("content", "width=yourwidth, user-scalable=no");
}

function myFunction() 
{
    $('meta[name=viewport]').attr("content", "width=1047, user-scalable=yes");
}


<select id="cmbYo" onchange="javascript: myFunction();" onclick="javascript: DisablePinchZoom();">
</select>

    DisablePinchZoom will be fired before the onchange so zoom will be disable at the time the onchange is fired. On the onchange function, at the end you can restore the initial situation.

    Tested on an iPhone 5S

    0 讨论(0)
  • 别那么骄傲
    2020-12-12 12:11

    Been reading for a few hours on this and the best solution is this jquery here. This also helps with the "next tab" option in iOS Safari. I have inputs here as well but feel free to remove them or add as you like. Basically the mousedown fires before the focus event and tricks the browser into thinking its 16px. In addition, the focusout will trigger on the "next tab" feature and repeat the process.

    $(function(){
    $('input, select').on("mousedown focusout", function(){
        $('input, select').css('font-size','16px');
    });
    $('input, select').on("focus", function(){
        $('input, select').css('font-size','');
    });
})
    0 讨论(0)
  • 南旧
    2020-12-12 12:17

    user-scalable=no is what you need, just so there's actually a definitive answer to this question

    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    0 讨论(0)
    • 1 2 下一页
     看不清?
    提交回复
    热议问题