发表新帖
发表新帖

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

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

I\'ve got this code:
提交评论
  •  加载中...
  • 孤街浪徒
    2020-12-12 12:21

    iOS zooms the page to show a larger input field if its font-size is less than 16px.

    only On click of any field, it's zooming the page. so on click, we are making it as 16px and then changed to default value

    below snippet works fine to me and targeted for mobile devices,

    @media screen and (max-width: 767px) {
 select:active, input:active,textarea:active{
        font-size: 16px;
 }
}

    0 讨论(0)
  • 执笔经年
    2020-12-12 12:23

    This seemed to work for my case in addressing this issue:

    @media screen and (-webkit-min-device-pixel-ratio: 0) {
select:focus, textarea:focus, input:focus {
        font-size: 16px;
    }
}

    Suggested here by Christina Arasmo Beymer

    0 讨论(0)
  • 天涯浪人
    2020-12-12 12:29

    I am a bit late to the party, but I found a pretty neat workaround that solves this issue only with css manipulation. In my case I couldn't change the font size due to design reasons, and I couldn't disable zooming as well.

    Since iPhone's will zoom form fields slightly if the text is set to less than 16 pixels, we can trick the iPhone to think that the font size is 16px and then transform it to our size.

    For example, lets take the example when our text is 14px, so it does zoom because it is smaller than 16px. Therefore we can transform the scale, according to 0.875.

    In the following example I've added the padding to show how to convert other properties accordingly.

    .no-zoom {
    font-size: 16px;
    transform-origin: top left;
    transform: scale(0.875);            //  14px / 16px
    padding: 4.57px;                    // 4px / 0.875
}

    I hope it helps!

    0 讨论(0)
  • 故里飘歌
    2020-12-12 12:29

    As answered here: Disable Auto Zoom in Input "Text" tag - Safari on iPhone

    You can prevent Safari from automatically zooming in on text fields during user input without disabling the user’s ability to pinch zoom. Just add maximum-scale=1 but leave out the user-scale attribute suggested in other answers.

    It is a worthwhile option if you have a form in a layer that “floats” around if zoomed, which can cause important UI elements to move off screen.

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    0 讨论(0)
  • 离开以前
    2020-12-12 12:30

    It is probably because the browser is trying to zoom the area since the font size is less than the threshold, this generally happens in iphone.

    Giving a metatag attribute "user-scalable=no" will restrict the user from zooming elsewhere. Since the problem is with select element only, try using the following in your css, this hack is originally used for jquery mobile.

    HTML :

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

    CSS:

    select{
font-size: 50px;
}

    src: unzoom after selecting in iphone

    0 讨论(0)
    • 上一页 1 2
     看不清?
    提交回复
    热议问题