| 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. |
||
|
Časová prodleva: 12 dní
|
|||
| Tomáš123 Profil |
#2 · Zasláno: 5. 12. 2016, 16:22:58
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.
|
||
|
Časová prodleva: 8 let
|
|||
0