Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
martinstejskal15:6.3.2014 16:34

už dlouho se pokouším vytvořit mobilní web, ale nevím co tam mám přidat, aby mi to fungovalo na všech mobilech a tabletech, jestli by jste mi to někdo mol vysvětlit co a kam mám přidat. Díky za odpovědi

 
Odpovědět
6.3.2014 16:34
Avatar
done
Člen
Avatar
Odpovídá na martinstejskal15
done:6.3.2014 16:42

Např. takhle, tento kód vložíš přímo do CSS:

@media only screen and (min-width: minimální šířka) and (max-width: maximální šířka){
//style
}

Zde popisují standartní velikosti:
http://css-tricks.com/…ard-devices/

Editováno 6.3.2014 16:43
 
Nahoru Odpovědět
6.3.2014 16:42
Avatar
Odpovídá na done
martinstejskal15:6.3.2014 17:01

a toto musím vložit teda do každý stránky co mám na serveru, vytvořit nový soubor css, nebo stačí jenom do css který je dávno vytvořený a vložit do jednoho souboru, nevadí to teda

Editováno 6.3.2014 17:04
 
Nahoru Odpovědět
6.3.2014 17:01
Avatar
Odpovídá na martinstejskal15
Neaktivní uživatel:6.3.2014 17:10

Můžeš mít různé css soubory pro různé media queries, nebo můžeš mít vše v jednom.

Vše v jednom (soubor css)

@media nejake pravidlo{
  body{
    background: red;
  }
}
@media a jine pravidlo{
  body{
    background: blue;
  }
}

pro kazde media query vlastní css soubor (hlavička html)

<!doctype ...
<html>
  <head>
    ...
    <link rel="stylesheet" type="text/css" media="media nejake pravidlo" href="nejake-pravidlo.css" />
    <link rel="stylesheet" type="text/css" media="media a jine pravidlo" href="jine-pravidlo.css" />
    ...
  </head>

  ...
</html>
Editováno 6.3.2014 17:11
Nahoru Odpovědět
6.3.2014 17:10
Neaktivní uživatelský účet
Avatar
done
Člen
Avatar
Odpovídá na martinstejskal15
done:6.3.2014 17:12

Stačí do jednoho souboru, píšeš do toho styly jako obvykle, můžeš mít libovolný počet specifikací v jednom souboru.

 
Nahoru Odpovědět
6.3.2014 17:12
Avatar
done
Člen
Avatar
Odpovídá na martinstejskal15
done:6.3.2014 17:17

Ještě bych dodal, že když máš nějakou vlastnost, která bude pro všechny stejná tak jí vlož na začátek souboru a nezakomponuj jí do žádné specifikace, bude společná pro všechny, ale půjde kdykoli přepsat pro jednotlivou specifikaci.

 
Nahoru Odpovědět
6.3.2014 17:17
Avatar
Odpovídá na done
martinstejskal15:6.3.2014 17:30

jo takže jsem to dal do jednoho souboru kde mám vše, a do toho jak je napsáno styly tam mám napsat teda to co mám při normální verzi

 
Nahoru Odpovědět
6.3.2014 17:30
Avatar
done
Člen
Avatar
Odpovídá na martinstejskal15
done:6.3.2014 17:34

Do max-width a min-width si vložíš pro jakou velikost monitoru, př. zařízení to má být a potom do { } píšeš normálně styly, např.

@media only screen and (min-width: 1200px) and (max-width: 1800px){
header {width: 100%; height: 100px}
section > article {width: 400px}
// atd.
}

Tedy bude to fungovat pro všechny monitory s šířkou mezi 1200 - 1800px.

 
Nahoru Odpovědět
6.3.2014 17:34
Avatar
martinstejskal15:6.3.2014 17:37

jo takže to vyzkouším a jestli se mi to nepovede tak napíšu zatím díky

 
Nahoru Odpovědět
6.3.2014 17:37
Avatar
martinstejskal15:6.3.2014 17:50

zatím to vypadá divně, mám hlavní stránku a text se mi zobrazil jenom v takovým proužku až dolů, text je nepřehledný, budu si muset vytvořit na serveru další složku a tam to bude ta mobilní verze, obrázek pod celou stránkou je tam víckrát, má být jenom jeden přes celou obrazovku.

 
Nahoru Odpovědět
6.3.2014 17:50
Avatar
done
Člen
Avatar
Odpovídá na martinstejskal15
done:6.3.2014 17:52

Pochybuji že to bude chyba media queries.

 
Nahoru Odpovědět
6.3.2014 17:52
Avatar
martinstejskal15:6.3.2014 17:53

no jo jenže jak to pak udělat aby to rozpoznalo normální web a web pro mobily, to bych vyřešil jak

 
Nahoru Odpovědět
6.3.2014 17:53
Avatar
Odpovídá na martinstejskal15
Michal Žůrek - misaz:6.3.2014 17:57

že by podle těch rozlišení? 2. možnost je podle User-agentu v JS, ale to je prasárna na druhou, tak ti k tomu ani nic konkrétněji říkat nebudu.

 
Nahoru Odpovědět
6.3.2014 17:57
Avatar
martinstejskal15:6.3.2014 17:57

dal jsem pryč overflow: auto; a furt nic

 
Nahoru Odpovědět
6.3.2014 17:57
Avatar
Odpovídá na martinstejskal15
Neaktivní uživatel:6.3.2014 17:58

Nevíme, co s tím vymýšlíš. Nahraj to na hosting a dej nám sem odkaz, třeba ti někdo poradí.

Nahoru Odpovědět
6.3.2014 17:58
Neaktivní uživatelský účet
Avatar
martinstejskal15:6.3.2014 18:02

na hostingu to je stránky jsou www.pharaon.wz.cz

 
Nahoru Odpovědět
6.3.2014 18:02
Avatar
Vojta Pšenák
Tvůrce
Avatar
Vojta Pšenák:6.3.2014 18:06

http://detectmobilebrowsers.com/ Pokud ti nefuguje to CSS, tak to udělej přes if() v PHPčku, můžeš potom i měnit text/zobrazovat obrázky v nižším rozlišení

 
Nahoru Odpovědět
6.3.2014 18:06
Avatar
done
Člen
Avatar
Odpovídá na Vojta Pšenák
done:6.3.2014 18:07

Co je to za blbost ?

 
Nahoru Odpovědět
6.3.2014 18:07
Avatar
Vojta Pšenák
Tvůrce
Avatar
Odpovídá na done
Vojta Pšenák:6.3.2014 18:10

Kód pro detekci mobilních prohlížečů, co se Ti na tom nelíbí?

 
Nahoru Odpovědět
6.3.2014 18:10
Avatar
martinstejskal15:6.3.2014 18:12

takže když tam vložím to if přes php tak to teda vložím do souboru top.php to mám všade jako include, takže to tam mám dát teda

 
Nahoru Odpovědět
6.3.2014 18:12
Avatar
Odpovídá na martinstejskal15
Michal Žůrek - misaz:6.3.2014 18:14

kdybyste nepoužívali ten zoom, tak mobil nemusíte příliš řešit. V media queris (viz kolegové výše) prostě zakryješ ty zbytečné panely s počasím atd.

 
Nahoru Odpovědět
6.3.2014 18:14
Avatar
Odpovídá na Michal Žůrek - misaz
martinstejskal15:6.3.2014 18:16

panely mám v plánu dát pryč z tý mobilní verze

 
Nahoru Odpovědět
6.3.2014 18:16
Avatar
done
Člen
Avatar
Odpovídá na Vojta Pšenák
done:6.3.2014 18:23

Musíš to rozlišit přes PHP a pokud si to nějak nanaroutuješ, tak tak budeš mít v adrese ty ošklivé parametry. Není to vůbec praktické.
Pochopil bych vybírání přes Ajax, ale i přesto jsou tu od toho media queries a ne těžkopádné PHP.

 
Nahoru Odpovědět
6.3.2014 18:23
Avatar
Vojta Pšenák
Tvůrce
Avatar
Odpovídá na done
Vojta Pšenák:6.3.2014 18:30

Proč bych měl blbý parametry? A je to lepší, protože můžeš zobrazit něco jiného na mobilní a něco jiného na normální verzi

 
Nahoru Odpovědět
6.3.2014 18:30
Avatar
done
Člen
Avatar
Odpovídá na Vojta Pšenák
done:6.3.2014 18:34

To je mnohem lepší přes JS.

 
Nahoru Odpovědět
6.3.2014 18:34
Avatar
martinstejskal15:6.3.2014 18:44

no nic teď to nechám být protože mi nějak stávkuje stránka, píše mi to
Jejda! Prohlížeči Google Chrome se nepodařilo připojit k serveru www.pharaon.wz.cz

Měli jste na mysli: www.wz.cz
takže pokračování asi až se to dá zpátky dohromady na jejich serverech

 
Nahoru Odpovědět
6.3.2014 18:44
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 26 zpráv z 26.