NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

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.

Aktivity
Avatar
Petr Urban
Člen
Avatar
Petr Urban:24.11.2016 18:45

Zdravím všechny,

Vytvářím web pro známého ODKAZ - stránka je zatím jako zkušební nahrána na hostingu for free.
Na webovém prohlížeči v počítači i na televizi a jinde v zařízeních, kde je šířka rozlišení větší jak 900px na šířku, tak se mi vše zobrazuje dle mých představ, ale jakmile stránku otevřu v nějakém z mobilních zařízení, tak se mi celá stránka chová, jakoby bych jí zoomoval (+) na počítači a vše se mi posune doleva a vypadá to debilně. Pokud dám celé stránce position: fixed, tak se mi to začne zobrazovat normálně, ale pochopitelně se s tím nedá hýbat a stránka je nepoužitelná.
Mohli by jste mi prosím poradit, v čem je problém? Protože já už jsem z toho na prášky.
Děkuji moc a zde přikládám layouty (HTML i CSS) - ale myslím si, že budu mít chybu někde v pozicování.

HTML (index.html)

  <body>
  <div id='background'>
        <header>
        </header>

   <div id='main'>
     <nav>
       <div id='menu'>
         <ul>
           <li><a href='index.html' class='active'>HLAVNÍ STRANA</a></li>
           <li><a href='HTML_files/sluzby.html'>NAŠE SLUŽBY</a>
             <ul>
              <li><a href='HTML_files/audity.html'>Energetické audity</a></li>
              <li><a href='HTML_files/studie.html'>Energetické studie</a></li>
              <li><a href='HTML_files/zajistenidotaci.html'>Zajištění státních dotací</a></li>
              <li><a href='HTML_files/dokumentace.html'>Projektová dokumentace</a></li>
              <li><a href='HTML_files/rizeni.html'>Výběrová řízení</a></li>
              <li><a href='HTML_files/financovani.html'>Financování projektů</a></li>
              <li><a href='HTML_files/mereni.html'>Termovizní měření</a></li>
              <li><a href='HTML_files/schuze.html'>Schůze společenství vlastníků</a></li>
              <li><a href='HTML_files/dodavky.html'>Dodávky materiálu</a></li>
              <li><a href='HTML_files/prukaz.html'>Průkaz energetické náročnosti</a></li>
             </ul>
           </li>
           <li><a href='HTML_files/reference.html'>REFERENCE</a></li>
           <li><a href='HTML_files/aktuality.html'>AKTUALITY</a></li>
           <li><a href='HTML_files/kestazeni.html'>KE STAŽENÍ</a></li>
           <li><a href='HTML_files/kontakt.html'>KONTAKT</a></li>
         </ul>
       </div>
     </nav>

             <div id='aside1'>
             </div>
             <aside>
             </aside>
             <article>
             </article>

        </div>
       <footer>

      </footer>


</div>
  </body>

a zde je CSS

* {
  margin: 0px;
  padding: 0px;
  }


#background {
            width: 100%;
            height: 100%;
            background-attachment: fixed;
            background-image: url('../Images/background.jpg');
            }




#main {
      position: relative; top: -100px;
      margin: 0 auto;
      width: 1000px;
      height: 1000px;
      border-radius: 15px 15px 15px 15px;
      box-shadow: black 20px 10px 50px;
      }

header {
       margin: 0 auto;
       width: 100%;
       height: 200px;
       background-image: url('../Images/header-background.jpg');
       box-shadow: black 0px 15px 40px;
       }

nav {
    margin: 0 auto;
    position: relative; left: 85px; top: -60px;
    width: 100%;
    height: 80px;
    }

article         {
                position: absolute; left: 200px; top: 0px;
                width: 598px;
                height: 100%;
                border-right:1px solid black;
                border-left: 1px solid black;
                background-image: url('../Images/article_background.jpg');
                padding-left: 10px;
                overflow: auto;
                }

aside {
      position: absolute; top: 0px;
      width: 200px;
      height: 100%;
      border-left: 0px solid black;
      border-radius: 15px 0px 0px 15px;
      background-image: url('../Images/article_background.jpg');
      padding-left: 10px;
      }

#aside1 {
        position: absolute; left: 798px; top: 0px;        /*pravý side*/
        width: 200px;
        height: 100%;
        background: rgb(255,255,255);
        padding-left: 10px;
        border-right: 0px solid black;
        border-radius: 0px 15px 15px 0px;
        background-image: url('../Images/article_background.jpg');
        }

footer {
       width: 100%;
       height: 55px;
       text-align: center;
       padding-top: 30px;
       font-weight: bold;
       background-image: url('../Images/header-background.jpg');
       color: rgb(255,255,255);
       font-style: normal;
       font-size: 20px;
       }

#menu ul {
         list-style-type: none;
         margin-left: 3%;
         margin-top: 19px;
         }

#menu li {
         float: left;
         }

#menu a {
        display: block;
        width: 120px;
        height: 60px;
        text-decoration: none;
        padding-top: 25px;
        text-align: center;
        color: rgb(255,255,51);
        background: rgb(3,52,84);
        transition: 400ms;
        border-right: 3px solid black;
        border-left: 3px solid black;
        border-radius: 5px;
        margin-left: 1px;
        font-size: 12px;
        font-weight: bold;
        opacity: 0.6;
        transition: 400ms;
        }

#menu a:hover {
              border-right: 3px solid rgb(255,255,51);
              border-left: 3px solid rgb(255,255,51);
              margin-top: 15px;
              padding-top: 18px;
              opacity: 1.5;
              }

#menu .active {
              border-right: 3px solid rgb(255,255,51);
              border-left: 3px solid rgb(255,255,51);
              margin-top: 15px;
              padding-top: 18px;
              opacity: 1.5;
              }

Byl bych vám strašně vděčný, kdyby jste mi řekli, kde mám chybu, nebo jak se to dá opravit.
Psal jsem už na jedno fórum, ale tam mi nikdo není schopen pomoci.

Odpovědět
24.11.2016 18:45
Do not let anybody stand in your way.
Avatar
Jakub Žák
Člen
Avatar
Odpovídá na Petr Urban
Jakub Žák:24.11.2016 20:23

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">
Editováno 24.11.2016 20:24
Nahoru Odpovědět
24.11.2016 20:23
Kuba je ajťák. Buď jako Kuba.
Avatar
Petr Urban
Člen
Avatar
Petr Urban:24.11.2016 21:32

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.

Editováno 24.11.2016 21:34
Nahoru Odpovědět
24.11.2016 21:32
Do not let anybody stand in your way.
Avatar
Petr Urban
Člen
Avatar
Petr Urban:24.11.2016 21:58

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.

Editováno 24.11.2016 21:59
Nahoru Odpovědět
24.11.2016 21:58
Do not let anybody stand in your way.
Avatar
Ján Timoranský
Tvůrce
Avatar
Ján Timoranský:24.11.2016 22:49

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ť.

Akceptované řešení
+20 Zkušeností
Řešení problému
Nahoru Odpovědět
24.11.2016 22:49
Find what you love and let it kill you.
Avatar
Petr Urban
Člen
Avatar
Odpovídá na Ján Timoranský
Petr Urban:24.11.2016 23:23

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ě.

Editováno 24.11.2016 23:23
Nahoru Odpovědět
24.11.2016 23:23
Do not let anybody stand in your way.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 6 zpráv z 6.