Autor Zpráva
kareldc
Profil
Ahoj všem, neumím si vysvětlit toto: obrázek s šířkou 480px je na mobilním displeji (š 480px) výrazně větší, přestože používám meta <... width=device-width...>? Zajímá mne proč? Je nutné ještě navíc definovat img{...} v css, a to i v případě, že šířka obrázku odpovídá šířce displeje? S definicí img to funguje, dle mého je ale zbytečná (zde je pro ukázku potlačena). Nebo dělám chybu někde jinde?
Link: http://bigstreet.cz/01/
Děkuji za odpovědi, prima den.

css:
body{
  font-family:Arial,Helvetica,sans-serif;
  color:#000000;
  text-align:center;
  font-weight:normal;
  font-style:normal;}
 
/*
img{
  max-width: 100%;
  height: auto;
}
*/

html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>pokus</title>

<body>
<img src="480.png"><br>
<h3>Nějaký nadpis h3 bla bla bla</h3>
<p align="justify">Lorem ipsum ...</p>
</body>
</html>
Plaváček
Profil
kareldc:

Obrázky nejsou ze své podstaty responzivní, proto je vhodné tu odkomentovanou definici u img zase zapnout. Pak bude vše fungovat, jak má. Více viz pěkné vysvětlení: http://demosthenes.info/blog/586/CSS-Fluid-Image-Techniques-for-Responsive-Site-Design (anligcky).
kareldc
Profil
Angl. nevadí (bude to pomalejší, ale rád se tím prokoušu). Zákonitosti responzivního webu (pro zobrazení v mobilech) vůbec neznám, takže dík za link a za každý nakopnutí :)
Plaváček
Profil
kareldc:

Pro studijní účely v českém jazyce bych asi doporučil články vycházející na Zdrojáku: http://www.zdrojak.cz/n/responsive-design/. Celá problematika resonzivního designu je poměrně složitá a vyžaduje slušné znalosti CSS, HTML a často i dalších technologií.
kareldc
Profil
Plaváček:
Jéé dík, tenhle web vůbec neznám.
OK, beru to tak, jak jsi napsal. A chápu, že obrázky nelze např. zalamovat stejně, jako text. Ale pokud je img totožný s šířkou displeje, tak mě bylo divný, že při použití meta <... width=device-width...> který vlastně definuje šířku zobrazení obsahu stránky, je přesto obrázek větší. Ale nechci to pitvat. Jen jsem si nebyl jistý, zda někde nedělám chybku, která by se mohla vymstít v případě více hotových stránek. Rozhodně dík za RE, koukám, že se mám co učit. Fajn.
Plaváček
Profil
kareldc

Může být, že těch 480px není skutečnou šířkou viewportu daného mobilního zařízení. Viz tabulka: http://www.zingdesign.com/responsive-website-design-cheatsheet1/.
kareldc
Profil
Plaváček:
Pročítal jsem tvé linky a taky znovu tohle forum, abych z něj dostal co nejvíc. Narazil jsem i na tvé starší komenty. Zásadní byl pro mne tvůj poslední a tento: "... rozlišení obrazovky navíc není totéž, co viewport" - do dnes jsem si myslel, že je. To mě přivedlo k hromadě dalších, podstatných článků, které mi pomohly trochu osvětlit nejen samotný termín "viewport", ale i další možnosti (a úskalí) responz. zobrazení. např.:
http://interval.cz/clanky/trapeni-webdesigneru-s-viewporty/
http://programujte.com/clanek/2013062900-nastroje-responzivniho-webdesignu/

... atd., a třeba i to, že se zobrazením souvisí např. i browser, ale i spoustu jiných věcí. Vždy jsem byl zvyklý dávat obrázek na web 1:1 aby se na stránce zobrazil v přesné velikosti a byl maximálně ostrý (při dodatečné úpravě velikosti v kodu html je kvalita vždy horší). Ale na respozivním webu a mobilních zařízeních nelze počítat s přesným zobrazením obrázku 1:1, což jsem do této chvíle vůbec netušil.

Narazil jsem např. na tyto tabulky velikostí viewportů:
http://viewportsizes.com/
Ale také na spoustu dalších textů, nákresů a vysvětlení, jak lze chápat termín "viewport". Dva linky za všechny - třeba i tohle někomu helfne:
http://www.quirksmode.org/mobile/viewports.html
http://www.quirksmode.org/mobile/viewports2.html

Dík za vše, moc mi pomáháš.
Plaváček
Profil
kareldc:

Tak ti přidám ještě jeden čerstvý a čtivý článeček, abys to s učením neměl tak jednoduché. :) http://ericportis.com/posts/2014/srcset-sizes/
kareldc
Profil
Plaváček:
Výstižný, trochu jsem se v něm viděl :D :D Ale i tuhle názornou legrácku pročtu pozorně. Dík.
arcadosi
Profil
Plaváček:

Perfektné obrázky :-D
kareldc
Profil
Plaváček:
Sice to sem asi nepatří, ale jen krátce: lámu si hlavu, jak udělat textarea s automatickou změnou šířky dle viewportu. Vím, že velikost je dána cols a rows, ale napadlo mě, jestli na to existuje nějakej trik v css, podobně jako pro img{}? O "formátování" textarea (což je asi nesmysl) jsem nic nenašel. Ale třeba nějaká možnost existuje, protože jsem často viděl formuláře, který na mobilní displej sedly jako pr..l na hrnec. Ale nevím už, zda to byly responzívní stránky, nebo extra mobilní verze.
Str4wberry
Profil
Můžete normálně pro rozměry používat i width a height. Mají před cols a rows přednost.
Plaváček
Profil
kareldc:

Prostě elementu "textarea" pomocí CSS nastavíš width=100%. Větší vědu v tom nehledej. :)
kareldc
Profil
Plaváček:
jj dík, právě mě to napadlo. Ale určitě dík :)


Zbytečnou vědu v tom nehledám, ale když si pročítám tohle forum, tak je to pro mě docela napínavá detektivka a občas zapomenu dívat se na věci jednoduše. No, většina z vás jste nabušený týpci, a je to pro vás malina ;) Dík za váš čas.


Str4wberry:
OK, díky. Šířka vpoho, ale height:auto; mi nefunguje. Zkoušel jsem class i id (což asi nemá vliv). Dělám někde chybu nebo je "auto" nesmyl?? Ale asi není nutné řešit výšku, protože přednastavený text nikdy nebude na více, jak jednu řádku. A pokud uživatel zadává dlouhý text, posunuje se řádek automaticky s kurzorem, což je u všech brovserů běžné (tedy aspoň myslím...) Chtěl jsem to jen vyzkoušet:

css:
.area{
  width: 100%;
  height: auto;
}

html:
<form>
<textarea class="area" name="pokus">Textarea</textarea>
</form>

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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