iOS Safari zoom on input box

1
votes

At the moment the newest iOS (14.4) will still zoom on any input box that takes focus, unless you use 16px on the input without the focus.

This alone isn't a problem, but when focus is removed from that input box - the scaling remains and destroys the appearance of the page.

Viewport tag in main single page is fine:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

The react code:

render() {
    return (
        <div className='my-form' style={this.props.style}>
            <h3>MyForm</h3>
            
            <div>
                <input 
                    {...InputGetterSetter(this, 'text')} 
                    placeholder="Please enter text"
                    onKeyDown={this.onKeyDown.bind(this)} />
            </div>

The SASS-defined css:

.my-form {
    width: 100%;
    height: 100%;
    text-align: center;
    
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        select,
        textarea,
        input {
          font-size: 16px;
        }
      }

    input {
        width: 66%;
        text-align: center;
    }

    .bottom-button {
        background-color: #00ac69;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 150px;
        outline: none;
        border: none;
        overflow: hidden;
    }
}

.keyboard-expanded {
    .my-form {
        .bottom-button {
            height: 60px;
            .ion-ios-telephone {
                font-size: 22pt;
            }
        }
    }
}

.dark {
    .my-form {
        input {
            color: white;
        }
    }
}

It is possible to prevent zooming in the first place by setting the font size, but what if we want the zooming but just for it to unzoom? Is this possible?

3
htmlcssios
Can you be more specific about your question? Can you maybe too provide a snipet of code? - Chris
@ChristopherHolder - code added and specifics are already there. Looking forward to your answer :-) - James Harcourt

3 Answers

0
votes

Also add in the meta tag user-scalable=no like so:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">

0
votes

The issue here was that it was a single page app using hash routing and relative links between pages.

A solution was to remove this and replace with fully qualified URLs when navigating around the site to different views - this achieved the goal of the question, to make iOS unzoom.

In the end we actually disabled the zooming, but the question was about how to cause an unzoom to occur on iOS and this was the way.

0
votes

Add following meta tag into <head></head>,

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

Add following into <script><script> tag OR into JS file,

<script>
    window.addEventListener("load", afterLoaded, false);
    function afterLoaded() {
        document.getElementById("viewport").setAttribute("content", "width=device-width, 
        initial-scale=1.0, maximum-scale=1.0, user-scalable=yes");
    }
</script>