Autor Zpráva
Petr Urban
Profil
Zdravím,

Jsem nový v oboru tvorby webových stránek a při tvorbě jedné, kterou dělám pro známého jsem narazil na problém a to v mobilních prohlížečích.
Mám zatím nahrané základy, které jsem si vytvořil na LINK. V mém prohlížeči se vše zobrazuje tak, jak si představuji - i na jiných prohlížečích, ale když jsem stránku otevřel na mobilním zařízení, tak je stránka celá posunutá doleva.
Zjistil jsem, že se stránka chová jako zvětšená, když jsem si stránku u sebe na počítači zazoomoval +, tak se mi všechny obrázkové pozadí šoupaly do leva a na telefonu to vypadá stejně, ale bez zoomování v základním zobrazení.

Tak Vás prosím, jestli by jsme mi mohli poradit, co mám poupravit, aby se stránka zobrazovala stejně jako v prohlížeči ,protože já už jsem z toho na palici.
PS: Nesnažím se web optimalizovat pro mobilní zařízení (zatím), takže chci, aby se to pro začátek zobrazovalo pouze stejně jako na PC.
Děkuji moc.

Takhle vypadá HTML zápis pro index.html
<!DOCTYPE html>
<html lang='cs'>
  <head>
    <title>Hlavní strana</title>
    <meta charset='utf-8'>
    <meta name='description' content=''>
    <meta name='keywords' content=''>
    <meta name='author' content=''>
    <link rel='stylesheet' type='text/css' href='CSS/style.css'>
    <meta name='robots' content='all'>
    <!-- <meta http-equiv='X-UA-Compatible' content='IE=edge'> -->
    <link href='/favicon.png' rel='shortcut icon' type='image/png'>
  </head>
  <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>
  


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://arrow.scrolltotop.com/arrow79.js"></script>
<noscript>Not seeing a <a href="http://www.scrolltotop.com/">Scroll to Top Button</a>? Go to our FAQ page for more info.</noscript>

</div>
  </body>
  
</html>

a zde jsou nastylované layouty
* {
  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;
       }

Na webu mám ještě hromadu věcí, které tam chci udělat, takže tuto je jen takový základ.
Tomáš123
Profil
Petr Urban:
Odstráň z hlavičky HTML dokumentu riadok: <meta name="viewport" content="width=device-width,initial-scale=1">.

Podrobnosti o tom, ako táto meta značka ovplyvňuje vykreslenie stránky na mobiloch.

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:

0