SOLVED: HTML button size issue in an Arduino webserver

Hello.

I’m very new with HTML. The idea now is to control a watering/lighting system over the internet. The Arduino Mega already holds the HTML code to be shown at the webbrowser. The defatul size for the button works well in the PC webbrowser, but in the mobile webbrowser appear really tiny. This is the instruction I’m using:

<button type=“button” onclick=“location.href=’./?CMD=SENSOR_UPDATE’”>ACTUALIZAR

I’m using this webapp: HTML Conversion for the Arduino IDE

Is there a way to set the button with an auto-size feature according to the device where is being seen? Thanks a lot

The problem will probably be solved by adding these lines in the section of the HTML file:

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

Erik_Baas:
The problem will probably be solved by adding these lines in the section of the HTML file:

<meta name="HandheldFriendly" content="True">
> ```

Hi. Thanks for answering. I think it didn’t work. I added this line where you said:

 String html_3 ="<meta name=\"HandheldFriendly\" content=\"True\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\">";
 client.println(html_3);

I’m getting this result:

PC: pc-buttons — ImgBB
Mobile: Screenshot-20201107-232658 — ImgBB

So it looks good on mobile, except for the button... Please post the complete sketch, so we can find a solution.

this example scales on smartphones

<!DOCTYPE html>
<html lang='en'>
<head>
<title>a short test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>this is a header2</h2>
<p>this is a reference text in p</p>
<button type='button' onclick='blabla' style='font-size:1.5em'>ACTUALIZAR</button>
</body>
</html>

we need the full HTML produced by your webserver to give an advice…

before posting, check your HTML for any errors: Ready to check - Nu Html Checker.
If the validator gives an OK, post your html.

Looks fine to me, on PC as well as on smartphone! Screenshot from phone, resized to 25%:

Copy of Screenshot_20201109-015837.jpg

(Firefox 81.1.5 on Android 10 v. 2.40)

Copy of Screenshot_20201109-015837.jpg

Erik_Baas:
The problem will probably be solved by adding these lines in the section of the HTML file:

<meta name="HandheldFriendly" content="True">
> ```

I checked again and I had a mistake in my original code: I missed the . I’m ashamed, I’m sorry also. :blush:

I’ve left the code with your suggestion.

Thanks a lot!