Question Deactivate automatic zoom of iOS 15 on InputField in WebGL buld

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.

Code (HTML):

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

as well as through CSS:

Code (CSS):

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

With no success.

Any ideas?

 

Code (JavaScript):

1.  
2. body {
3.   touch-action: none;
4. }
5.  

Is it possible to add this to CSS?

 

No it doesn't work

 

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

 

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.

Code (JavaScript):

1. input[type="text"]
2. {
3.     /* enlarge by 16/12 = 133.33% */
4.     border-radius: 6.666666667px;
5.     font-size: 16px;
6.     line-height: 26.666666667px;
7.     padding: 6.666666667px;
8.     width: 133.333333333%;
9.  
10.     /* scale down by 12/16 = 75% */
11.     transform: scale(0.75);
12.     transform-origin: left top;
13.  
14.     /* remove extra white space */
15.     margin-bottom: -10px;
16.     margin-right: -33.333333333%;
17. }

 

For me it's not working.