| Autor | Zpráva | ||
|---|---|---|---|
| PepaMiegl Profil |
#1 · Zasláno: 24. 11. 2013, 17:26:42
Dobrý den,
mám takový problém. Udělal jsem si na stránce http://pepincz.clanweb.eu/ nový vzhled (to na to nemá vliv). Udělal jsem aby se to zobrazovalo dobře na všech zařízeních (a povedlo se :) Ale když na stránku du třeba z mobilu nebo tabletu s menším rozlišením (např. 480p nebo tak nějak), tak stránka není roztáhlá na celou obrazovku. Teprve když udělám gesto pro oddálení je stránka celá. De mi tedy o to, jak v HTML udělat to, aby stránka se na všech zařízeních zobrazovala s přiblížením 100% (tedy normálně) Budu rád za odpovědi :) |
||
| okolojsoucí Profil * |
#2 · Zasláno: 24. 11. 2013, 18:28:36
Výsledky hledání „How to make responsive design“ v Googlu:
1 • How to Create a Responsive Website in about 15 Minutes 2 • Responsive Web Design just got Easier with the Responsive Grid ... 3 • 30 Useful Responsive Web Design Tutorials - Hongkiat 4 • How to Do Responsive Web Design Right - MarketingProfs 5 • Responsive Web Design - An Advanced Guide to HTML & CSS 6 • 10 Developer Tips To Build A Responsive Website [Infographic ... 7 • Selling Responsive Web Design To Clients | Smashing Magazine 8 • How to build a responsive HTML5 website - a step by step tutorial Na internetu je málo odpovědí? |
||
| PepaMiegl Profil |
#3 · Zasláno: 24. 11. 2013, 18:56:01
Jé nechci přímo předělávku pro mobili, chci jenom aby na mobilních zařízeních se stránka zobrazovala bez zoomu (100%)
|
||
| Rfilip Profil |
#4 · Zasláno: 24. 11. 2013, 19:02:30
To uděláš meta tagem viewport:
<meta name="viewport" content="width=device-width, initial-scale=1"> |
||
| PepaMiegl Profil |
#5 · Zasláno: 24. 11. 2013, 19:16:31
To sice funguje, ale zase je skoro půl stránky oříznuta. Takže uživatel sice vidí písmo (obsah) ale nevidí celí ten design.
Bez toho meta tagu to funguje, ale když se na to připojí mobilní zařízení tak je to defaultně nazoomované. Musím gestem oddálit a pak teprve je to tak jak chci. Jukněte se třeba na ten web z mobilního zařízení a okopírujte si z prohlížeče zdrojoví kod. |
||
| LudekBrno Profil |
#6 · Zasláno: 24. 11. 2013, 19:39:01
PepaMiegl:
Nejspíš tam máš nějakému prvku nastavenou pevnou velikost v pixelech a v té velikosti se to prostě zobrazí v závislosti na rozlišení displeje. A co má znamenat těch dva miliony řádků tagu <BR>? ;-) |
||
| PepaMiegl Profil |
#7 · Zasláno: 24. 11. 2013, 19:41:08
Jo ty BR :D
Nevěděl jsem jak udělat víc mezer najednou, kdyžtak mi prosím porad :) |
||
| MyShare Profil |
PepaMiegl: Nazdar
Napr. ? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="generator" content="PepinCZ's HTML">
<meta name="author" content="PepinCZ">
<meta name="description" content="Pepinův web pro začátečníky i profesionáli">
<meta name="keywords" content="HTML, Web, YT, YouTube, Endora.cz, Google.cz, Seznam.cz, hudba, kytara, mazlíčci, zvířata, počítače">
<title>Pepinův pokusný web</title>
<link rel="shortcut icon" href="images/favicon.ico">
<style type="text/css">
body {
margin: 0;
padding: 0;
background: url(web.jpg) center top no-repeat;
}
.page { width: 100%; }
#center {
width: 100%;
margin: 0 auto;
}
h1 {
text-align: center;
}
p.br {
margin: 250px auto;
}
.center {
margin: auto 80px;
}
</style>
</head>
<body class="page">
<div id="center">
<p class="br">
<h1>
<strong>
<blink>
<big>
<b>
<i>
<u>
Moje pokusná stránka.
<br>
<del>Vyčkejte až bude hotová! xD</del>
</u>
</i>
</b>
</big>
</blink>
</strong>
</h1>
<div class="center">
<a href="http://pepincz.funsite.cz"><h1>Můj web!!</h1></a>
<a href="http://www.youtube.com/user/czpepin"><h1> Můj YouTube kanál!!</h1></a>
</div>
<div class="center">
<img src="http://pepincz.funsite.cz/wp-content/uploads/2013/11/YouTube_banner.png" alt="Logo PepinaCZ">
<a href="http://pepincz.clanweb.eu/" target="_blank">
<img src="http://toplist.cz/count.asp?logo=mc&ID=1598546" border="0" width="88" height="60">
</a>
</div>
<noscript>
<div>
<div class="dulezite">
Reklamu na tomto hostingu zajišťuje Business Factory -
internetová reklama a pokročilý internetový marketing.
</div>
</div>
</noscript>
</p>
</div>
</body>
</html>Nie je to síce profesionálne nemám moc času ale určite lepšie ako s 1000X <br> :) P.S. A čo tak sa Naučiť HTML-5 a CSS-3 + Responsive Design začal som používať @media all and (max-width: 780px) { ... } atď...
a je to kúzelne! to prispôsobovanie :) |
||
|
Časová prodleva: 10 let
|
|||
0