Autor Zpráva
David1256
Profil
Dobrý den,

dělal jsem teď jeden web a snažil jsem se ho udělat responzivně. Vytvářel jsem ho na localhostu, a tak jsem testoval responzivitu pouze měněním šířky okna prohlížeče, kde vše krásně fungovalo. Když jsem web dodělal, stáhl jsem si ho i na smartphone, kde jsem se zhrozil, protože responzivita byla totálně fuč. Začal jsem přemýšlet, kde je problém a zjistil jsem, že si prohlížeč a to jakýkoliv (Opera Mobile, Firefox, ten defaultní na Androidu, teď nevím, jak se jmenuje) nebere styly pro např. 480px (na výšku) a 800px (na šířku), ale třeba na 1000px. Abych vyloučil nějakou chybu na webu, který je opravdu velký a těžko by se tam asi hledala, tak jsem to zjednodušil na jednoduchý příklad a potvrdil jsem si, že jsem měl pravdu. I v jednoduchém příkladu si bral smartphone styly pro větší šířku obrazovky než má. A tak zní otázka jasně, proč? Zdrojový kód příkladu je zde.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head> 
<style>
#obsah{
width:500px;
height:500px;
}
@media screen and (min-width:500px){
#obsah{
background-color:red;
}
}
@media screen and (max-width:499px){
#obsah{
background-color:green;
}
}
</style>       
<body>
<div id="obsah">
</div>
</body>
</html>
Jde tam jednoduše o to, že se při větší šířce obrazovky než 499px zobrazí červený čtverec, jinak zelený. Na PC funguje při změně velikosti okna na smartphonu ne a zobrazuje se tam červený, i když mám rozlišení 800x480px. Kde je tedy zakopaný pes?

Díky.
pcmanik
Profil
David1256:
Skús si do hlavičky pridať:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
Poprípade odmaž to user-scalable a min a max scale any uzivateľ mohol stránku približovať/oddalovať.
David1256
Profil
Super. Díky moc. Funguje.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: