| Autor | Zpráva | ||
|---|---|---|---|
| Tomy Profil |
Ahoj, potřebuju poradit, jak bych mohl udělat responzivní web pro mobily/tablety. Napdlo mě, že by šlo udělat dvě css, které by se vybíraly pomocí nějakého scriptu, který by vždy proběhl při načítání stránky. Problém je v tom, že nevím, jak ten script mám udělat. Kdysi jsem si našel tenhle kód
<script>
(function detectmob() {
var hostname;
if(navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
) {
window.location.href="http://...";
}
else {
return;
}
})()
</script> |
||
| Radek9 Profil |
#2 · Zasláno: 25. 9. 2016, 17:20:34
Tomy:
Proč? Použij media queries. |
||
| Tomy Profil |
Radek9:
No pročetl jsem to celé, teď se s tím nějak dorozumět :D Nikdy jsem to nedělal, ale snad se mi to nějak povede no. Potřeboval bych totiž dát pryč i nějaké obrázky, aby to bylo pro ty mobily přijatelnější.. |
||
| xaverista Profil |
#4 · Zasláno: 25. 9. 2016, 17:49:01
Tomy:
Na toto jsou už celkem pěkně zpracované frameworky :-) často používám, tedy snad ve všech projektech Bootstrap |
||
| ZdenekPNJ Profil |
xaverista:
Dobrou zkušenost mám taky s Foundation (foundation.zurb.com) Tomy: Nevím proč, ale řešit to přes detectmob() mi příjde vzhledem ke zkušenostem s frameworky zbytečné. Mají to opravdu vychytané, velmi dobrá podpora atd. |
||
| pcmanik Profil |
Ťahať stovky zbytočných riadkov css kódu, ktoré sa nikdy nepoužijú a robiť weby ktoré sa podobajú jeden na druhý nemá zmysel. Lepšie bude sa poriadne naučiť CSS a podobný framework nebude treba, kód bude menej "zasvinený" a o rok dva sa bude jednoduchšie upravovať ako znovu študovať dokumentáciu frameworku...
|
||
| Keeehi Profil |
#7 · Zasláno: 25. 9. 2016, 21:51:02
pcmanik:
Pokud použiješ tupě celý framework, pak budeš mít v něm i nepoužité části kódu. Pokud si však vezmeš zdrojové kódy frameworku a skompiluješ si ho sám, můžeš si určit jaké části v něm budou. Výhoda frameworku je v tom, že je prověřený, takže by se měl chovat konzistentně napříč prohlížeči, takže to nemusíš testovat. |
||
| Chamurappi Profil |
#8 · Zasláno: 26. 9. 2016, 13:34:36
Reaguji na ZdenekPNJe:
„Dobrou zkušenost mám taky s Foundation“ To je ta podivná věc, která se nechá fatálně rozbít tím, že jako název písma není false?
„Mají to opravdu vychytané, velmi dobrá podpora atd.“ Takže už jim to funguje ve starší Opeře? Bude framework datově menší než ty stahované obrázky? Reaguji na xaveristu: „Na toto jsou už celkem pěkně zpracované frameworky :-)“ Což znamená, že řeší Tomyho zadání, aby se určitý obrázek v mobilu vůbec nenačítal? Jak přesně? Reaguji na Keeehiho: „Výhoda frameworku je v tom, že je prověřený, takže by se měl chovat konzistentně napříč prohlížeči“ Potkávám se starším Firefoxem celkem dost rozsypaných layoutů. Přestože uživatelů starších Mozill je procentuálně mnohem víc než uživatelů starších Webkitů, v Bootstrapu 4 zůstává -webkit-box-sizing a chybí -moz-box-sizing. Část návštěvníků uvidí rozpadlý layout, aby se ušetřilo cca 140 znaků v CSS – souhlasí všichni uživatelé Bootstrapu s tímto rozhodnutím vývojářů? Nebo jim prostě věří?
Reaguji na Tomyho: „Kdysi jsem si našel tenhle kód“ To sis našel zajímavou obludu. Jednak by všechny ty matche šly nahradit jedním testem, jednak je tam úplně zbytečný else…
|
||
| Tomy Profil |
#9 · Zasláno: 26. 9. 2016, 18:30:10
Chamurappi:
Tak co mi teda doporučuješ použít? |
||
|
Časová prodleva: 7 dní
|
|||
| emissary Profil |
#10 · Zasláno: 3. 10. 2016, 10:23:03
Tomy:
Jednoznačne media queries. Od toho to predsa máme... do HTML si pridaj k meta tagom toto: <meta name="viewport" content="width=device-width, initial-scale=1"> do CSS si na začiatok pridaj toto: html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}a potom pokračuj dole v CSS so svojimi podmienkami. Napr: @media (max-width: 37.8125em) {/* 605/16 */
/* .contact-bar {
font-size: 70%;
}*/
.personal {
width: auto;
}
.personal li {
float: none;
}
.personal li:first-child {
margin-bottom: .5em;
}
.pre-footer .personal li {
display: inline-block;
}
.social {
font-size: 1.33em;
}
}
@media (max-width: 33.75em) {/* 540/16 */
footer h1,
footer p,
footer .menu {
width: 100%;
text-align: center;
}
footer .logo {
margin-bottom: 0;
}
footer .autor {
margin-top: 1.7em;
}
footer .menu {
margin-top: 0;
}
footer .menu li {
float: none;
display: inline-block;
}
}
@media (max-width: 31.25em) { /* 500/16 */
.personal,
.social {
width: 100%;
text-align: center;
}
.personal {
margin: 1.2em 0;
}
.personal li {
display: inline-block;
}
.social {
font-size: 1em;
margin-top: .8em;
}
.social li {
width: 24%;
margin: 0 0.4%;
}
.social .social-icon {
width: 100%;
height: auto;
line-height: 2.3em;
}
.post-title {
font-size: 3.2em;
line-height: 1.1em;
display: block;
text-align: center;
}
} |
||
|
Časová prodleva: 9 dní
|
|||
| Tomy Profil |
#11 · Zasláno: 12. 10. 2016, 19:32:00
emissary:
Děkuji moc :) |
||
| Tomy Profil |
#12 · Zasláno: 13. 10. 2016, 21:08:23
emissary:
Můžu se ještě zeptat, jakou úlohu v css má tenhle kód? Děkuji :) > do CSS si na začiatok pridaj toto: html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
} |
||
| Trejpa Profil |
Tomy:
Box-sizing mění počítání rozměrů. Hodnota border-box způsobí, že padding a border-width jsou součástí nastavené šířky a výšky.
Díky tomu můžeš blokům vedle sebe určit procentní šířku z dostupného prostoru a pro okraj a rámeček použít jiné jednotky, které nebudou šířku zvětšovat, protože jsou započítané už v ní: příklad. |
||
|
Časová prodleva: 3 dny
|
|||
| Tomy Profil |
#14 · Zasláno: 16. 10. 2016, 21:39:54
Děkuju moc:) Ještě bych měl jeden dotaz. Chci použít na mobil tlačítko na změnu mobilní verze na desktop, ale nějak mi to nefunguje. Dělám to podle Přepnout mobilní/desktopový web, ale vůbec nic to nedělá. (nepožívám doménu "m.stranky.cz")
|
||
|
Časová prodleva: 8 let
|
|||
0