Weblap Windows - Android különböző

Web, mail, IRC, IM, hálózatok

Sziasztok!
Egy faék egyszerű weblapot generál az ESP8266 eszközöm.
Az van, hogy Windows és Android böngészőkben megnézve nagyon nem egyformák.
Windows alatt jók a lap margói, míg Android alatt sokkal nagyobbak. Tehát a kiírt
szövegek is rosszul tördelődnek.
Nem találtam, mitől lehet.
Idemásoltam a stílus fájlt. (web szerkesztésben nagyon-nagyon kezdő vagyok...)
Mi lehet az eltérő kinézet oka?
(a kép, amin látható: https://pasteimg.com/image/all.hJS66)
Köszönöm,
Roland

@font-face {
    font-family: 'antaregular';
    src: url('anta-regular-webfont.woff2') format('woff2'),
         url('anta-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body{
	min-height:100vh;
	/*font-family: 'antaregular', sans-serif;
    src:url(Anta-regular.woff) format('woff');*/
    font-family: 'antaregular', sans-serif;
    background-color: #151515;
}
h2 {
   color:#fff;
   text-align: left;
   margin-left: -35%;
   transform: translate(0,-10%);
}
h3 {
   color:#fff;
   text-align: left;
   margin-left: -35%;
   transform: translate(0,-10%);
}
.text-center{
	color:#fff;	
	text-transform:uppercase;
    font-size: 22px;
    margin: -40px 0 80px 0;
    display: block;
    text-align: center;
}
.box{
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
    background-color: rgba(0, 0, 0, 0.89);
	border-radius:3px;
	padding:70px 100px;
}
.input-container{
	position:relative;
	margin-bottom:25px;
    margin-left: -35%;
    width: 170%
}
.input-container label{
	position:absolute;
	top:0px;
	left:0px;
	font-size:20px;
	color:#fff;	
  pointer-event:none;
	transition: all 0.5s ease-in-out;
}
.input-container input{ 
  border:0;
  border-bottom:1px solid #555;  
  background:transparent;
  width:100%;
  padding:8px 0 5px 0;
  font-size:16px;
  color:#fff;
}
.input-container input:focus{ 
 border:none;	
 outline:none;
 border-bottom:1px solid #e74c3c;	
}
/*.btn{
	color:#fff;
	background-color:#e74c3c;
	outline: none;
    border: 0;
    color: #fff;
	padding:10px 20px;
	text-transform:uppercase;
	margin-top:50px;
	border-radius:2px;
	cursor:pointer;
	position:relative;
    width: 99%
}
.btn:after{
	content:"";
	position:absolute;
	background:rgba(0,0,0,0.50);
	top:0;
	right:0;
	width:100%;
	height:100%;
}*/
.input-container input:focus ~ label,
.input-container input:valid ~ label{
	top:-15px;
	font-size:15px;
}

.button-15 {
  background-image: linear-gradient(#42A1EC, #0070C9);
  border: 1px solid #0077CC;
  border-radius: 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  direction: ltr;
  -display: block;
  /*font-family: "SF Pro Text","SF Pro Icons","AOS Icons","Helvetica Neue",Helvetica,Arial,sans-serif;*/
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.47059;
  min-width: 30px;
  overflow: visible;
  padding: 4px 15px;
  text-align: center;
  vertical-align: baseline;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  width: 99%
}

.button-15:disabled {
  cursor: default;
  opacity: .3;
}

.button-15:hover {
  background-image: linear-gradient(#51A9EE, #147BCD);
  border-color: #1482D0;
  text-decoration: none;
}

.button-15:active {
  background-image: linear-gradient(#3D94D9, #0067B9);
  border-color: #006DBC;
  outline: none;
}

.button-15:focus {
  box-shadow: rgba(131, 192, 253, 0.5) 0 0 0 3px;
  outline: none;
}

( tornai | 2024. 02. 28., sze – 15:09 )

Szerkesztve: 2024. 02. 28., sze – 15:10

Genyó leszek: kérdezd meg a chatgpt-t, úccse kell má' programozó.

( Lacu | 2024. 02. 28., sze – 15:15 )

A HTML kód hiányában ez így elég nehéz.

Első körben azt nézném meg, hogy a HTML kódban a head részben szerepel-e ez (vagy hasonló) sor:

<meta name="viewport" content="width=device-width, initial-scale=1" />
<!DOCTYPE html>

<html>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="60">
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="box">
	<form action="/" method="POST">
    <span class="text-center"> </span>
		<span class="text-center">Mérőpont</span>
	<div class="input-container">
		<input type="text" required="" name="server" value="%SRVS%"/>
		<label>Szerver</label>		
	</div>
	<div class="input-container">		
		<input type="text" required="" name="gyak" value="%GYAKS%"/>
		<label>Adatküldés gyakorisága (perc)</label>
	</div>
    <div class="input-container">		
		<input type="text" required="" name="did" value="%DID%"/>
		<label>Device ID</label>
	</div>
		<center><input type="submit" class="button-15" value="Beállít"></center>
		<hr>
		<h3>Idő: %IDO%</h3>
		<h3>M.idő: %UPTIME%</h3>
		<h3>Verzió: %VERSION%</h3>
		<hr>
        <h2>1. hely: %MP1% °C</h2>
        <h2>2. hely: %MP2% °C</h2>
        <h2>3. hely: %MP3% °C</h2>
        <h2>4. hely: %MP4% °C</h2>
        <h2>5. hely: %MP5% °C</h2>
        
</form>	
</div>

</body>
</html>

A két meta tagnek a head tagen belül kellene lennie (illetve a charset-es meta taget is külön szedném), tehát így:

[...]
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="refresh" content="60">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
[...]

( Nyosigomboc v | 2024. 02. 28., sze – 16:57 )

Rakerestem, de nincs is benne kulon CSS szekcio kis kepernyore. Valami ilyesmi:

@media only screen and (max-width: 700px)
{
    .blabla
    {
        width: 100%;
    }

}

A margokat ide-oda allitgatod, gondolom az is benne van. De nem vagyok CSS guru.

A strange game. The only winning move is not to play. How about a nice game of chess?