Diskuze: mobilní web

Java Android Mobilní telefony mobilní web

Avatar
martinstejskal15:

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:

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:

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
Jiří Gracík
Redaktor
Avatar
Odpovídá na martinstejskal15
Jiří Gracík:

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  +1 6.3.2014 17:10
Creating websites is awesome till you see the result in another browser ...
Avatar
done
Člen
Avatar
Odpovídá na martinstejskal15
done:

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:

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:

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:

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:

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:

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:

Pochybuji že to bude chyba media queries.

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

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):

ž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
Nesnáším {}, proto se jim vyhýbám.
Avatar
martinstejskal15:

dal jsem pryč overflow: auto; a furt nic

 
Nahoru Odpovědět 6.3.2014 17:57
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na martinstejskal15
Jiří Gracík:

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
Creating websites is awesome till you see the result in another browser ...
Avatar
martinstejskal15:

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
Redaktor
Avatar
Vojta Pšenák:

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  ±0 6.3.2014 18:06
Avatar
done
Člen
Avatar
 
Nahoru Odpovědět  -1 6.3.2014 18:07
Avatar
Vojta Pšenák
Redaktor
Avatar
Odpovídá na done
Vojta Pšenák:

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

 
Nahoru Odpovědět  +1 6.3.2014 18:10
Avatar
martinstejskal15:

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):

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
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Michal Žůrek (misaz)
martinstejskal15:

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:

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
Redaktor
Avatar
Odpovídá na done
Vojta Pšenák:

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:

To je mnohem lepší přes JS.

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

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.