| Autor | Zpráva | ||
|---|---|---|---|
| Replayman Profil |
Ahoj,
mám problém s responzivníma stránkama, že v zobrazení na mobilu na výšku se nezobrazí do plné šířky. Když telefon dám vodorovně a obraz se mi přetočí na šířku, již je vše tak jak má být a obraz je do 100% zařízení. Na počítači to funguje, tak jak má. Přikládám náhled zobrazení na mobilu (1.foto je s telefonem na výšku a nevyplněná celá šířka zařízení, 2.foto je s telefonem vodorovně a zobrazením celé šířky webu) Foto 1 - nevyplněná celá šířka 
Foto2 - celá šířka 
Co by mohlo být špatně? Dělají to všechny stránky... Děkuji za info. |
||
| Mlocik97 Profil |
Replayman:
ak máte nastavený na html, body výšku aj šírku 100%, margin a padding na nulu, overflow máte správne nasavený a používate meta tag, ttak najčastejšie je to potom spôsobené niektorými elementami ktoré majú defaultné hodnoty CSS v user agentu margin start/end/before/after alebo absolutne pozicovanými prvkami Pozrel som sa na tú stránku a je tam toho hodne veľa čo je špatne. Skuste meta viewport upraviť na: <meta name="viewport" content="width=device-width, initial-scale=1.0"> a do CSS na začiatok prvého súboru pridať: * {
margin: initial;
}
html, body {
overflow-x: hidden;
overflow-y: scroll;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
} |
||
| Tomášeek Profil |
Mlocik97:
100% width pro body je defautní hodnota, netřeba ji nastavovat. Stejně jako výška je zbytečná. Padding je pro body nulový defaultně. Pro HTML je nulový defaultně i margin. Margin: initial? WTF? Proč? Viewport je nastavený, stačilo se podívat do kódu. Replayman: Na debugování nemám čas, ale inspektni s iv tom rozlišení jednotlivé elementy, který to způsobuje. Někde (u nějakého wrapperu) budeš mít v tom mobilním breakpointu omezenou šířku, nebo tam přebývá nějaký overflow. |
||
| Mlocik97 Profil |
Tomášeek:
to nieje pravda, body nemá defaultne 100% veľkosť. Skus si do body vložiť len jeden div s červeným pozadím, skus bez toho aby si nastavil explicitne veľkosť html, body, marginy a paddingy tak skus použiť u toho divu height calc(100% - 100px) uvidíš že ti to nepôjde a ani ten div nebude mať takú veľkosť. margin initial že proč? pro tú vec, kvôli ktorej h1 nadpis bol schopný posunúť celé body mimo viewportu. Môžem ti ukázať jaké veľké rozdieli to má. Mám to dať na GitHub? Margin initial totiž mení chovanie margin before/after/start/end |
||
| Tomášeek Profil |
Mlocik97:
„body nemá defaultne 100% veľkosť.“ Eh? 100% šířku má. To si můžeš zkusit. O nastavení výšky jsem psal, že je zbytečné v souvislosti s popsaným problémem. Padding nulový je defaultně, odsazení způsobuje 8px margin u body. HTML má nulové obě hodnoty. „margin initial že proč? pro tú vec, kvôli ktorej h1 nadpis bol schopný posunúť celé body mimo viewportu.“ Copak se tu řeší nějaký problém s H1? |
||
| Mlocik97 Profil |
Tomášeek:
h1 je iba príklad, je mnoho elementov ktoré môžu spôsobiť práve toto, a zrejme aj spôsobujú. Pozri sa do dev toolok chromu a pochopíš. To s tými "100%" nieje úplne pravda, áno defaultne majú, lenže vnorené elementy v ňom môžu šírku body zmeniť, a i když použiješ overflow-x: hidden; tak v situáciách (ako práve mobilná verzia) spôsobí, presne toto, když to tam nastavíš explicitne, funguje to správne, mám to odskúšané priamo na mobiloch. |
||
| Tomášeek Profil |
#7 · Zasláno: 24. 9. 2018, 10:25:41
Mlocik97:
„je mnoho elementov ktoré môžu spôsobiť práve toto“ Který element může omezit šířku v tomto konrétním případě? Otázka je položena jasně tazatelem, zatím odpovídáš na mnoho ostatních teoretických možností, mimo problém tazatele. |
||
| Mlocik97 Profil |
Tomášeek:
odpovedám presne na problém tazatele. Skus ten kód vložiť do DOMu tej stránky a pochopíš. presne to čo som napsal, presne ten CSS kód rieši presne tento problém takto s mojim kódom: 
a takto bez môjho kódu:  Tomášeek: vidím inak že ty nevieš ani základy CSS, ale pičuješ do mňa když poradím správne. |
||
| Replayman Profil |
#9 · Zasláno: 24. 9. 2018, 11:06:53
Děkuji za snahu pomoci,
když přidám do css souboru tvůj kód, tak se vše zobrazí, tak jak má, jen se vyskytne další problém....a to rolování (posouvání na telefonu) není plynulé a nejde popojet o větší kus dolů jedním slajdem, ale musím prstem posouvat viditelný obsah a nejde to zrychlit, bez tvého kódu to funguje normálně. Díky! |
||
| Mlocik97 Profil |
Replayman:
skus si skontrolovať či nemáš v JS funkcie závyslé od scrollovania. Otestoval som stránku na J5 (2016) a mne to ide plinulo. |
||
| Replayman Profil |
#11 · Zasláno: 24. 9. 2018, 11:35:42
Zkoušel jsem na Huawei a na něm to šlo, ale nejde to na iPhonu.....
čím by to mohlo být?? |
||
| Mlocik97 Profil |
Replayman:
Skuste ešte upraviť meta tag jak som hore zmínoval, síce width=device-width nastavuje aj initial-scale=1.0 ale ne všetky prehliadače na všetkých zariadeniach sa v tomto chovajú stejne a podporujú trebárs len jednu z týchto hodnôť, napsaním oboch tak vyriešiť viac prehliadačov. ďalej bych pridal do CSS do body ešte -webkit-overflow-scrolling: touch; to by mohlo tomuto pomôcť. (defaultne sa totiž apluje regular scrolling a nie momentum-based scrolling) |
||
| Replayman Profil |
#13 · Zasláno: 24. 9. 2018, 12:09:21
Super, děkuji:-) povedlo se!!
Ještě, když jsme u těch oprav....tak na stránce Produkty, bych potřeboval, aby na mobilu byl zobrazena nabídka pod Vyber kategorii (Vše, Brusivo na podložce atd..) uprostřed displeje a né k jedné straně jak to je a stejně i tak položky s texty níže (při vertikálním i horizontálním zobrazení). Na počítači to je ve středu. Mockrát děkuji! |
||
| Mlocik97 Profil |
Replayman:
horizontálne centrované blokové elementy sa dajú riešiť skrz (ak sú riadkové tak je obalte blokovými - div): margin-left: auto; margin-right: auto; float: none; sry za pozdejšiu odpoveď, bol som na obede. nav#vertical ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
overflow: hidden;
background-color: #666666;
}
nav#vertical ul li {
float: none;
}
nav#vertical ul li a {
display: block;
color: #ffffff;
padding: 12px;
text-decoration: none;
cursor: pointer;
}(selectory môžete zjednodušiť (je ideálne držať čo najnižšiu špecificitu, a upraviť podľa vašej potreby), samozrejme tie položky klasicky sú v zozname ul>li>a (to a môžete nahradiť trebárs aj spanom), nekteré časti kódu sú tam aj navyše, ale ono záleží aj od "okolitého CSS" a aké vlastnosti elementy dedia od rodičov. Ak to chcete aplikovať len na mobile, a na PC to funguje jak chcete, použite @media |
||
|
Časová prodleva: 6 let
|
|||
0