Diskuze: Zobrazování v mobilních zařízeních.
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Člen
Zobrazeno 6 zpráv z 6.
//= Settings::TRACKING_CODE_B ?> //= Settings::TRACKING_CODE ?>
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Nevím, jestli jsem tě pochopil, ale zkusil bych
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
Po zadání se mi stránka ještě více začala zobrazovat blíž (zoom +) a
bylo to ještě horší.
Zde je stránka, jak vypadá na mobilním zařízení (je jedno, jestli je to
iOS nebo Android, zobrazuje se to stejně) náhled na mobilní zařízení - header a footer, který
mají parametr width 100%, aby byly na 100% celé stránky se ,,zcvrknou" a
posunou se doleva jako při při zoomování + na počítači, kde to při
zoomování funguje normálně, ale pokud to otevřu v tom mobilním
zařízení, tak se stránka zobrazí úplně celá zarovnaná doleva a header a
footer jsou odříznutý, jakoby byly omezený šířkou, ale přitom mají
parametr width: 100%.
Stránku jsem zkoušel dát celou do margin: 0 auto, ale také to nereaguje.
Stránka se mi zobrazuje na počítači a zařízení s vyšším rozlišením př. televize normálně, ale pokud je to zařízení menší s menším displejem, tak se stránka chová, jako by tam byl margin: 0px a nezarovná se to na střed. Ani header a footer se nechovají jako na 100% šířku.
Zde přikládám screenshot z telefonu, jak to vypadá na normální zobrazení místo toho, aby byla stránka zarovnána na střed jako na počítači.
Musíš si naštudovať @media queries. Najväčšiu šarapatu ti v kóde robí toto:
#main {
position: relative; top: -100px;
margin: 0 auto;
width: 1000px;
height: 1000px;
border-radius: 15px 15px 15px 15px;
box-shadow: black 20px 10px 50px;
}
Skús si pozrieť max-width/min-width. Stránka sama od seba nebude mobile friendly, treba ju na to prerobiť.
Děkuji moc.
Já jsem si myslel, že bude problém v tom #main divu už jen kvůli
rozměrům, které jsem musel přizpůsobit.
Zatím to již funguje dle mých představ na mém telefonu, jak to funguje na
ostatních se teprve kouknu.
Web jsem ze začátku neplánoval dělat responzivn, ale bude to lepší.
@media queries jsem samozřejmě věděl, že existuje, ale nezaměřil jsem se na to pořádně.
Zobrazeno 6 zpráv z 6.