Nežádoucí zvětšení textu na webu s androidem

Webdesign, HTML, CSS, Flash, PHP, ASP, .NET, JavaScript. Kritika www stránek na Smetišti.

Moderátor: Moderátoři Živě.cz

Odeslat příspěvekod martinxsx 17. 2. 2021 08:28

Mám jednoduchou stránku (html s CSS).

Když kliknu na odkaz (tlačítko) v telefonu, tabletu s androidem (chrome, firefox, opera) tak se stránka zvětši a klik provede na úplně jiný odkaz.

Dá se to nějak v telefonu nebo v html pořešit?

Děkuji
martinxsx
Kolemjdoucí

Odeslat příspěvekod Wikan 17. 2. 2021 08:53

A co je to za stránku? Tohle rozhodně není standardní chování, takže tam musíš mít něco speciálního.
Wikan
Moderátor
Uživatelský avatar

Odeslat příspěvekod martinxsx 17. 2. 2021 12:42

client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");

client.println("");
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head>");
client.println("<title>title</title>");
client.println("<meta charset='utf-8'>");
client.println(F("<meta http-equiv=\"refresh\" content=\"10;URL=../\">"));
client.println(F("<style> a.tlacitko {padding: .5em; background: #D62988; border: 1px solid #B41F71; color: #fff; cursor: default; text-decoration: none; border-radius: 5px}"));
client.println(F("a.tlacitko:hover {background: #E371AF}"));
client.println(F("a.tlacitko:active {position: relative; top: 1px; left: 1px} </style>"));
client.println("</head>");
client.println("<body>");

//text a odkazy
client.println("</body>");
client.println("</html>");
martinxsx
Kolemjdoucí

Odeslat příspěvekod Wikan 17. 2. 2021 12:47

Dát to sem jako normální HTML by nešlo?
Wikan
Moderátor
Uživatelský avatar

Odeslat příspěvekod martinxsx 17. 2. 2021 12:54

Tak jsem to promazal.

HTTP/1.1 200 OK
Content-Type: text/html
Connection: close

<!DOCTYPE HTML>
<html>
<head>
<title>title</title>
<meta charset='utf-8'>
<meta http-equiv="refresh" content="10;URL=../">
<style> a.tlacitko {padding: .5em; background: #D62988; border: 1px solid #B41F71; color: #fff; cursor: default; text-decoration: none; border-radius: 5px}
a.tlacitko:hover {background: #E371AF}
a.tlacitko:active {position: relative; top: 1px; left: 1px} </style>
</head>
<body>

//text a odkazy
</body>
</html>
martinxsx
Kolemjdoucí

Odeslat příspěvekod Wikan 17. 2. 2021 13:00

Ale tam není žádný obsah. Tak na jaké odkazy tam klikáš?
Wikan
Moderátor
Uživatelský avatar

Odeslat příspěvekod meda2016 17. 2. 2021 13:07

To odskakováni odkazu změnou velikosti někdy dělá I stránka ČSFD na nějakém filmu. Chceš se trefit do odkazu na herce a v té chvíli se stránka o trochu zvětši a přeskupí. Ne vždy.
Není optimalizovaná pro mobilní zobrazení a Android použije dle mé představy vlastnost zobrazení "přizpůsobit ke sloupci", bohužel úplně blbě.
meda2016
Junior

Odeslat příspěvekod martinxsx 17. 2. 2021 13:20

Mám teď k dispozici jen zdroják, kde je spousta balastu, zpětná lomítka atd.
Promazal jsem ten 1 řádek jako ukázku:

HTTP/1.1 200 OK
Content-Type: text/html
Connection: close

<!DOCTYPE HTML>
<html>
<head>
<title>title</title>
<meta charset='utf-8'>
<meta http-equiv="refresh" content="10;URL=../">
<style> a.tlacitko {padding: .5em; background: #D62988; border: 1px solid #B41F71; color: #fff; cursor: default; text-decoration: none; border-radius: 5px}
a.tlacitko:hover {background: #E371AF}
a.tlacitko:active {position: relative; top: 1px; left: 1px} </style>
</head>
<body>

<a href="?00000" class="tlacitko">Vypnout</a>
<a href="?00001" class="tlacitko">Stupeň 1</a>
<a href="?00002" class="tlacitko">Stupeň 2</a>

</body>
</html>
martinxsx
Kolemjdoucí

Odeslat příspěvekod Wikan 17. 2. 2021 13:34

Vyzkoušeno. Nijak se mi to nezvětšuje. Takže bych to viděl na problém v té části kódu, kterou jsi nezveřejnil.
Wikan
Moderátor
Uživatelský avatar

Odeslat příspěvekod martinxsx 17. 2. 2021 13:49

Děkuji za vyzkoušení.
Ono se to tak chová možná proto, že je toho hodně a nevejde se to na výšku obrazovky.

Zkusím to pak znovu zapojit a stáhnout html z prohlížeče, aby toho bylo více.

Ještě tam mám dole jednoduchý formulář s 1 hodnotou, který funguje dobře a jinak tam kromě doplňovaného textu z proměnných nic zvláštního neobjevuje, akorát se to pořád opakuje s odměněnými hodnotami.

<h5> - stupně výkonu </h5>
Stupeň 1:
<form method>
<input type="text" name="1" value="stupen 1">
<input type="submit" value="odeslat">
</form>
martinxsx
Kolemjdoucí

Odeslat příspěvekod Emil Pastelka 17. 2. 2021 17:58

Do záhlaví mezi <head></head> přidejte meta hodnotu
<meta name="viewport" content="width=device-width, initial-scale=1>

případně, pokud zoom chcete zakázat, pak rovnou
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

Pokud tam tato hodnota není, upravuje se velikost prvků na stránce dle systémového nastavení každého prohlížeče.
Emil Pastelka
Junior
Uživatelský avatar

Odeslat příspěvekod martinxsx 21. 2. 2021 17:50

Emile, funguje to.
Sice byl problém, že poslední tlačítko (hypertext) se na menším displeji lámalo na nový řádek, ale upravil jsem to cestou menšího odporu, tj. že jsem změnil text tlačítek.
Děkuji a jsem rád, že jsem výjimečně dostal přínosnou radu, když já už stovky dal někde jinde.
martinxsx
Kolemjdoucí


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků