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>
, ale nevím, jak do něho zakomponovat to css. Je tam totiž odkaz na nějakou stránku a ne na soubor.
Radek9
Profil
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
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
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
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
Chamurappi:
Tak co mi teda doporučuješ použít?
emissary
Profil
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;
    }
}
Tomy
Profil
emissary:
Děkuji moc :)
Tomy
Profil
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.
Tomy
Profil
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")

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: