Nieprawidłowe sklowanie strony poniżej 400px na telefonie

Question

Witam, gdy wejdę na stronę w wersji mobilnej to poniżej 400px zachodzi dziwne skalowanie (dla mnie dziwne), najlepiej widać to jak swobodnie rusza się oknem i zmniejsza szerokość poniżej 400px. wgląda to tak jakby css nie traktował width: 100% czy width: 100vw jako rzeczywistą szerokość urządzenia. Szerokość zmniejsza się znacznie szybciej niż rzeczywista szerokość okna, ekranu. Gdy zjadę niżej i nav ustawi się na position: fixed, to wtedy ten element nie ma problemu z szerokością. Wiecie dlaczego tak się dzieje i jak to naprawić? Dziękuję za wszelką pomoc.

strona: https://blazbla274.github.io/Upenglish/

github: https://github.com/blazbla274/Upenglish

Answer 1

Próbowałeś to rozwiązać poprzez min-width / max-width?

miałem podobny problem i u mnie to pomogło

Comments

Spróbowałem, ale niestety nie rozwiązuje to problemu :(

---

Rozwiązałem problem, wykorzystując mechanizm który działa w jakiś sposób w navie. Zmodyfikowałem tag body na  position: fixed i width: 100%. Wciąż jeżeli ktoś znałby przyczynę tego zachowania (wytłumaczenie techniczne) to będę wdzięczny za komentarz, pozdrawiam!

---

Hyy jednak nie :( teraz za to nie mogę scrolować, zbyt wcześnie świętowałem :P

Answer 2

W nagłówku nie mieści ci się tekst "Szkoła języków obcych" i tekst automatycznie rozszerza stronę. Ukryj tekst, zmniejsz czcionkę lub zastosuj inną technikę aby tekst nie wychodził poza stronę.

Comments

Nawet jak dam nav, display: none tak żeby wgl nie przeszkadzał text, to dalej pozostaje ten sam problem :/

---

Teraz jestem pewien, jeżeli jest szerokość jest poniżej 400px to ustawiam body width: 400px i wszystko zaczyna działać, ale wciąż nie rozumiem do końca dlaczego to działa:
 

@media all and (max-width: 400px) {
    body {
        width: 400px;
    }
}

 

---

Bo coś ci wychodzi poza stronę i się nie mieści. To co zaproponowałeś jest raczej obejściem a nie rozwiązaniem problemu. Jeśli problemu nie rozwiązał nagłówek być może coś jeszcze wystawało ;)

Answer 3

Nie możesz dać

@media all and (max-width: 400px) {
    body {
        width: 400px;
    }
}

bo to ma się skalować. A Ty piszesz: jeżeli okno przeglądarki ma 400px lub mniej to niech body ma zawsze 400px. i okno ma np: 399px a body 400px i pojawia się sroll.

Ale to nie wszystko. Jeszcze nadaj dla

.about_us > section > .introduce > img {
    display: inline-block;
    vertical-align: top;
}

width: 100%; bo zdjęcia również rozpychają Ci body.

Linijka 328 main.css'

.price_list_box też ma szerokość na sztywno

.lectors > div również szerokość na sztywno

I jeszcze by coś znalazł.  Css powinien mieć raczej płaską strukturę, czyli unikaj długich selektorów

Używanie zbyt długich selektorów powoduje problemy ze specyficznością. Efekt jest podobny do !important – kod staje się trudniejszy w utrzymaniu i modyfikacji. A już napewno nie wiąż selektorów ze strukturą HTML

.about_us > section > .introduce > img, bo jak zmienisz coś w html ( w tej strukturze) to Ci się  posypie cala reguła.

Comments

Zgodzę się ze wszystkim poza początkiem, zauważyłem, że poniżej 400px skalowanie zachodzi jak bym nie miał <meta name="viewport" content="width=device-width, initial-scale=1"> i dlatego moje media ustawiające body na stałe 400px, poniżej 400px działa, wszystko się zmniejsza proporcjonalnie. ps: Niektóre kontenery mają stałą szerokość żeby wszystko wyśrodkować poniżej tej szerokości wykorzystuje % dopasowanie