Deactivate automatic zoom of iOS 15 on InputField in WebGL buld

Unity Engine
, ,
1

Hi folks,

I have an issue with a WebGL build on iOS 15, but look okay on android and computer version.

I can’t seem to disable the automatic zoom that Safari applies to a legacy input field (Unity v 2022). I’ve already tried disabling it through meta filters in the HTML header, like on iOS 10.

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

as well as through CSS:

input:focus { font-size: 16px!important}

With no success.

Any ideas?

2 
body {
  touch-action: none;
}

Is it possible to add this to CSS?

3

No it doesn’t work

4

Faced the same problem. Did you manage to find a solution?

5

I’m answering my own question. To fix this glitch, you need to add this block to the CSS/HTML web template you are using.

input[type="text"]
{
    /* enlarge by 16/12 = 133.33% */
    border-radius: 6.666666667px;
    font-size: 16px;
    line-height: 26.666666667px;
    padding: 6.666666667px;
    width: 133.333333333%;

    /* scale down by 12/16 = 75% */
    transform: scale(0.75);
    transform-origin: left top;

    /* remove extra white space */
    margin-bottom: -10px;
    margin-right: -33.333333333%;
}
6

For me it’s not working.

7

any solution?

8

Add this meta tag to your index:

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

Here is a fix that worked for me.

after a little research, it looked like there is an automatic call for a zoom-in on iOS whenever the zoom target is less than 16 pixels.

for Web builds

add the following block at the end of the CSS file:

    font-size: 16px;
}

file-location: ProjectBuildFolder/TemplateData/style.css

** btw no need to rebuild : )