Autor Zpráva
Josef Falta
Profil
Dobrý den,
potřebuj poradit, jak vytvoři PHP kód, aby když někdo sleduje mé stránky z mobilního zařízení, se mu pozadí stránky přešlo na background-size: auto.
Toto hledám z důvodu, protože na mobilních zařízení se pozadí neukáže na celé obrazovce, i když mám nastaveno, aby se obrázek ukázal 100%(funguje to jenom v deskop verzi). S tím auto bych se spokojil, ale nejlepší by bylo, kdyby existovalo něco, co i na mobilních zařízení ukáže celý neuseklý obrázek na pozadí, ale jak jsem čet na jakpsatweb, prý to nejde. Tak spížto auto. Díky za pomoc ;)
juriad
Profil
Josef Falta:
Spíš to checš na všech zařízeních s obrazovkou menší než XYZ pixelů
www.vzhurudolu.cz/prirucka/css3-media-queries

@media only screen and (max-width: XYZ) {
  element-který-má-to-pozadí {
    background-width: auto;
  }
}
Keeehi
Profil
A nechceš spíš background-size: contain; To bez deformací roztáhne obrázek jak jen to jde, ovšem jen tak, aby byl vidět celý a nemusel se nikde ořezávat.
Bubák
Profil
juriad:
background-width
Tuhle CSS vlastnost neznám a ani se mi o ní nepodařilo nic "vygůglovat".

Josef Falta:
jak jsem čet na jakpsatweb, prý to nejde
Možná jsi jen natrefil na neaktualizovanou stránku a doby, kdy to doopravdy nešlo a používaly se různé triky. Dneska už to není problém, funkční od IE9 včetně výše.
Background-size
background-size
Pravděpodobně (hádám podle toho, jak jsi problém popsal)se ti bude hodit hodnota contain, jak už napsal Keeehi, ale je dobré vědět, že jsou i další možnosti.
Josef Falta
Profil
Keeehi:
Tohle jsem taky zkoušel, ale na mobile mi nefunguje.

juriad:
@media only screen and (max-width: XYZ) { element-který-má-to-pozadí { background-width: auto; } }
Zkoušel jsem i tohle, ale ani to mi nefunguje.

Možná by mi pomohly ty "různé triky" anebo se to nedá vyřešit?
Mlocik97
Profil
Josef Falta:
A más tam meta tag viewport s hodnotou width device width 1.0?
Keeehi
Profil
Josef Falta:
Tak nám dej odkaz na stránku ať víme, o čem se bavíme.
Josef Falta
Profil
Keeehi:
Tak nám dej odkaz na stránku ať víme, o čem se bavíme.
Tak tady je: kvarta-crg-17-18.wz.cz/s/uvod.html
Doufám, že to pomůže, v podstatě je to problém na všech stránkách
Keeehi
Profil
Josef Falta:
Takže, obrázek je roztažen přes celý tag body. Problém je, že z elemntu body lezou různé části (text, drak atp.) a tím tu stránku rozšíří.
V tvém případě neexistuje žádná jednoduchá rada. Je vidět, že s tím děláš úplně poprvé. A kvůli tomu to nejde jen tak jednoduše opravit. Máš to splácané páté přes deváté. Hlavním problémem bude především pozicování. Když nějakému elementu nastavíš, že má být 1000px vpravo, tak je prostě 1000px vpravo i na mobilech které ale zobrazují jen třeba 360px.
Josef Falta
Profil
Keeehi:
V tvém případě neexistuje žádná jednoduchá rada. Je vidět, že s tím děláš úplně poprvé. A kvůli tomu to nejde jen tak jednoduše opravit. Máš to splácané páté přes deváté. Hlavním problémem bude především pozicování. Když nějakému elementu nastavíš, že má být 1000px vpravo, tak je prostě 1000px vpravo i na mobilech které ale zobrazují jen třeba 360px.
Takže to jde nebo se to bude muset nějak překopat?
Keeehi
Profil
Samozřejmě že to jde, ale v důsledku to bude znamenat to celé předělat. Ovšem nejsem si jistý, zda to se svými zkušenostmi vůbec zvládneš. Nejlepší by pro tebe asi bylo si najít nějakou pěknou jednoduchou responzivní šablonu a tu si přizpůsobit.
Josef Falta
Profil
Keeehi:
Nejlepší by pro tebe asi bylo si najít nějakou pěknou jednoduchou responzivní šablonu a tu si přizpůsobit.
Jenže takovouhle podobu jsem již ukázal jako budoucí a očekává se, že i bude, ovšem bez chyb. Proto podobu webu nechci měnit. Pokusím se asi vytvořit kód jinak.
Tomášeek
Profil
Josef Falta:
Tak ono stáhnout si šablonu, která bude responsivní a část jí vyházet, aby ti z toho zbyl takhle jednoduchý web, nebude těžké. Nic moc, co bys do ní musel dodělávat, tam není. Hledej dvouslopcové responsivní layouty, nemělo by to být neřešitelné. A asi i časově méně náročné, než tohle přetvořit tak, aby to dávalo smysl.
Keeehi
Profil
Josef Falta:
Jenže takovouhle podobu jsem již ukázal jako budoucí a očekává se, že i bude
Nejsi žádné profesionální webové studio, děláš to nejspíš pro kamarády a zadarmo. Myslím, že by jim nevadil jiný vzhled, hlavně když to bude fungovat.
Ale nikdo taky neříkal, že ten vzhled musíš měnit. Pokud si najdeš vhodnou, tak v ní jen vyměníš obrázky, změníš barvy a vložíš obsah. Tohle je ideální stav a nejspíš nenajdeš šablonu přesně takovou, ale najdeš nějakou hodně podobnou. A buď jí upravíš, a nebo se smíříš s drobnými odlišnostmi.

Pokusím se asi vytvořit kód jinak.
I to je možnost. Pro tebe ovšem o dost složitější možná až neuskutečnitelná.
Pokud se přesto do toho chceš pustit, doporučuji nejdřív několik hodin pročítat články o responzivitě webů a pak se teprve vrhnout na samotné kódování.
Základem je, že málo kterému prvku se nastavuje pevná šířka spousta prvků přebírá šířku podle jejich obsahu, nebo jako procentní část rodiče. A pokud se už nějaká šířka nastavuje absolutně, většinou není pevně daná, ale nastavuje se minimální nebo maximální velikost. Druhou částí responzivního designu jsou media queries. Pomocí nich se nastavují breakpointy, při kterých se preskládávávají části stránky. Je snad jasné, že menu vedle obsahu může být jen od určité šířky. Na malých obrazovkách se vedle sebe nevejdou. Takže je to potřeba nějak vyřešit - schovat a zobrazovat po kliknutí, nebo třeba přesunout nahoru. Na větších stránkách se toho přesouvá spousta a třeba i několikrát. Protože ty máš stránky velmi jednoduché, tvojí jednou starostí nejspíš bude právě jen to menu.
Josef Falta
Profil
Tomášeek:
Tak ono stáhnout si šablonu, která bude responsivní a část jí vyházet, aby ti z toho zbyl takhle jednoduchý web, nebude těžké.

Keeehi:
Nejlepší by pro tebe asi bylo si najít nějakou pěknou jednoduchou responzivní šablonu a tu si přizpůsobit.

Nakonec jsem dospěl k názoru, že pro mě bude stačit ta šablona. Už jednu mám a sní dokážu pracovat i vzhledu na mobile.

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: