Autor Zpráva
Pavel Straka
Profil
Dobrý večer, rád bych poprosil zkušenější o radu. Snažím se vytvořit mobilní podobu webu. Web je poměrně jednoduchý a myslím si, že bych si mohl vystačit s jednou verzí jak pro tablety tak pro mobily. Snažím se inspirovat mobilní verzi webu alza.cz (m.alza.cz).

Nyní ale bojuji s jednou základní věcí:
představuji si, že budu mít (stejně jako vyhledávání na m.alza.cz) <div> se 100% šířkou a v něm <input type="text"> s šířkou dejme tomu 75% a zbytek šířky (25%) bude zabírat button. Web testuji na iPadu a iPhonu. Na iPadu je to tak, jak jsem si představoval, ale na iPhonu je už button pod inputem. Předpokládám, že je to kvůli tomu, že 25% šířky iPhonu je méně než minimální šířka tlačítka (vycházející z textu v něm).

Jak ale účinně zaručit, že na každém zařízení budou input a button vedle sebe?

Děkuji všem za ochotu.
Tomáš123
Profil
Pavel Straka:
Jak ale účinně zaručit, že na každém zařízení budou input a button vedle sebe?
A prečo ich chceš vedľa seba? Možno pre užívateľa nebude ľahké trafiť tak malé tlačítko... Naopak, možno by bolo lepšie od určitej šírky riadok zalomiť a tlačítko umiestniť pod vyhľadávacie pole, pričom obidva budú široké 100%.
Pavel Straka
Profil
Jak jsem psal, nejraději bych se vyhnul různým změnám pro různé šířky zařízení.
Keeehi
Profil
Problém ale je, že mobilní verze stránky nesmí vypadat jako stránka původní, jen v malém. Mobilní zařízení a uživatelé mají jiné potřeby než ti na desktopu. Oni chtějí a potřebují aby stránka vypadala jinak.
Pavel Straka
Profil
JJ, samozřejmě. Ale má představa je, že mobilní verze bude stejná jak pro tablet tak pro mobil. Pro desktop je jiná verze.
Na té alze to vypadá takto:
Mobil
Tablet

(Jde o ten formulář vyhledávání)
Tomáš123
Profil
Pavel Straka:
Veď sám píšeš, že sa tie prvky na mobile vedľa seba nevojdú. Stačila by jedna responzívna deklarácia navyše.
Chamurappi
Profil
Reaguji na Pavla Straku:
Předpokládám, že je to kvůli tomu, že 25% šířky iPhonu je méně než minimální šířka tlačítka (vycházející z textu v něm).
Pokud nastavuješ width, tak s celkovou šířkou elementu nic z toho, co je uvnitř, nehne. Kromě jeho paddingu a borderu, pokud nepoužíváš okrajový box model. Připomínám, že tlačítko také může mít určité výchozí styly.
Pavel Straka
Profil
Chamurappi: OK, děkuju za uvedení na pravou míru.

Co mi tedy uniká? Jakou cestou se mám vydat? Nezbyde mně než mít různé styly pro různá zařízení?

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:

0