| Autor | Zpráva | ||
|---|---|---|---|
| David1256 Profil |
#1 · Zasláno: 11. 8. 2013, 13:09:38
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>Díky. |
||
| pcmanik Profil |
#2 · Zasláno: 11. 8. 2013, 13:50:51
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"> |
||
| David1256 Profil |
#3 · Zasláno: 11. 8. 2013, 14:08:55
Super. Díky moc. Funguje.
|
||
|
Časová prodleva: 11 let
|
|||
0