Prevent TextField zoom

[augustobob]

Hi, it’s not the first time I try to make this for the iOS safari, then I found a guide on how to prevent this behavior, I tried some ways to inject the maximum viewport scale and font size with no luck, can someone help me?
according with this page doesn’t look hard to prevent this, but idk how to do https://thestateofmatter.com/2-ways-to-avoid-the-automatic-zoom-in-on-input-fields

also I couldn’t find anything on the scripts repo, so I’m asking for help here. Sorry if it’s the wrong place.

[ACTCD]

First of all, please do not abuse the issue tracker of this project. For questions not related to project development, you can ask for help in the Discussions forum.

Secondly, what have you tried, you should list them clearly so that others can know where the problem is and help you.

For our project, setting input or textarea to the following style effectively solves this problem:

input[type="text"], textarea {
	font-size: 16px;
}

[augustobob]

Sorry about that, it wasn’t my intention. I searched for a bit before creating a issue, but my baby started to cry and I did this asap to try to get some help.

I made a script with the following content:

// ==/UserScript==

(function () {
	"use strict";

	viewport;
	let viewportMeta = document.querySelector('meta[name="viewport"]');
	if (viewportMeta) {
		viewportMeta.setAttribute(
			"content",
			"width=device-width, initial-scale=1, maximum - scale=1",
		);
	} else {
		viewportMeta = document.createElement("meta");
		viewportMeta.name = "viewport";
		viewportMeta.content =
			"width=device-width, initial-scale=1, maximum - scale=1";
		document.head.appendChild(viewportMeta);
	}
})();

But I have no clue if it’s correct. And now I’m sure I don’t know a thing about this and need detailed help as I’m 5.
Thanks for your help,
Sorry again for the mistake

[ACTCD]

I edited and formatted your code for easier reading.

Like I said above (and mentioned in the article you linked to), changing meta is not a recommended practice, and browsers may ignore it.

Try using the smallest font size, it works for our project.

[ACTCD]

For example a possible user script:

// ==UserScript==
// @name        NewScript-kwidl294
// @description This is your new file, start writing code
// @match       *://example.com/*
// @grant       GM.addStyle
// @inject-into content
// ==/UserScript==

GM.addStyle(`
input[type="text"], textarea {
	font-size: 16px;
}
`)

// Just to add an input box
const input = document.createElement("input");
input.type = "text"
input.placeholder = "sometext";
document.querySelector("div").append(input);

[augustobob]

I tried with your example, but I had no lucky, idk if I did something wrong, but the zoom still applying.

// ==UserScript==
// @name        zoomd
// @description prevents zoom
// @match       *://*/*
// @grant       GM.addStyle
// @inject-into content
// ==/UserScript==

GM.addStyle(`
input[type="text"], textarea {
        font-size: 16px;
}
`)
// Just to add an input box
const input = document.createElement("input");
input.type = "text"
input.placeholder = "sometext";
document.querySelector("div").append(input); ```

[ACTCD]

I just tried it, it works for me, and I recreated a script and video to make it more intuitive, just install the script and open https://example.com/ website:

// ==UserScript==
// @name        NewScript-input-test
// @description This is your new file, start writing code
// @match       *://example.com/*
// @grant       GM.addStyle
// @inject-into content
// ==/UserScript==

GM.addStyle(`
#text1 {
	font-size: 16px;
}

#text2 {
	font-size: 10px;
}
`)

// Just to add an input box
const input = document.createElement("input");
input.type = "text"
input.id = "text1"
input.placeholder = "font-size: 16px;";
const input2 = document.createElement("input");
input2.type = "text"
input2.id = "text2"
input2.placeholder = "font-size: 10px;";
document.querySelector("div").append(input, input2);

input_rec.mp4