rozmiar okna przegladarki

pytanie zadane 7 lipca 2020 w HTML i CSS przez lujasjeden Użytkownik (860 p.)

Dlaczego jak proboje w poziomie zmniejszyc okno przegladarki, zeby zobaczyc jak by dzialalo na innych urzadzeniach moja strona to w pewnym momencie mi sie blokuje i nie moge dalej pomniejszyc juz okna. Gdzie to zmienic?

3 odpowiedzi

odpowiedź 7 lipca 2020 przez Comandeer Guru (600,810 p.)

odpowiedź 7 lipca 2020 przez eunstachy Stary wyjadacz (14,180 p.)

Kliknij w dowolnym miejscu na stronie prawy przycisk myszy na następnie wybierz "zbadaj". Pojawi się konsola przeglądarki (jeśli zamierzasz tworzyć strony internetowe to mocno zachęcam do zapoznania się z jej możliwościami). Następnie kliknij w ikonkę tabletu oraz telefonu. Wtedy będziesz mógł wybrać dowolny rozmiar okna.

komentarz 7 lipca 2020 przez lujasjeden Użytkownik (860 p.)

dzieki wielkie za ten trick, a mozesz mi powiedziec dlaczego w takim razie z takim kodem jaki wklejam po zwężeniu okna (ilustruje mi wtedy to widok uzytkownikow z mniejszymi wyswietlaczami? tak?) moje divy nie rozszerzaja sie i nie widac ich tylko 1 w rzedzie po przekroczeniu 360px? Nie wiem w sumie czy przekraczam 360px ale robie najmniejszy mozliwy to chyba tak? Jakis blad w kodzie? Wszelkie uwagi do jakiegokolwiek momentu w kodzie mile widziane bo dopiero co zaczynam, wlasciwie nie zalezy mi na niewiadomo czym w htmlu ale potrzbne mi zeby jakos ta moja wymarzona strona wygladala a nie tylko funkcjonowala.

Kod html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="Tutaj jest opis!">
    <link rel="stylesheet" type="text/css"
    href="UkladStrony.css">
    <title>Strona Główna</title>
</head>
<body>
    <section class="w1">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
    
    <section class="w2">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
    
    <section class="w3">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>


</body>
</html>

Kod css:

body {
    padding: 0;
    margin: 0;
    background-image: linear-gradient(
        30deg,
        moccasin,
        lightblue   
    );
    
}

div {
    height: 150px;
    background-color: red; 
    float: left;
    margin: 2%;
}

.w1 div{
    width: 21%;
    
}

.w2 div {
    width: 21%;
    
}

.w3 div {
    width: 21%;   
}

@media all and (max-width: 360px) {
    .w1 div{
    width: 96%;
    
    }
    .w2 div {
    width: 96%;
    
    }

    .w3 div {
    width: 96%;   
    }

}

komentarz 7 lipca 2020 przez lujasjeden Użytkownik (860 p.)

zalezy mi zeby strona wygladala tak ze dla duzych ekranow laptopy, komputery, byly po 4 divy w 3 rzedach a dla telefonow 1/2 divy w rzedzie

komentarz 7 lipca 2020 przez eunstachy Stary wyjadacz (14,180 p.)

Zacznij od dodania

<meta name="viewport" content="width=device-width, initial-scale=1">

w sekcji head.

Tutaj opis z MDN w jakim to jest celu

Przeglądarki mobilne, takie jak Fennec wyświetlają strony w wirtualnym "okienku" (viewport), zazwyczaj jest on szerszy niż ekran, tak aby strony nie zoptymalizowane pod wyświetlanie na urządzeniach mobilnych nie musiały się ściaskać w wąskim okienku. Użytkownicy mogą sobie przybliżyć i przesuwać ekran by zobaczyć inne części strony.

Mobilna wersja Safari przedstawiła "viewport meta tag", aby pozwolić developerom na kontrolę rozmiar widocznego pola i jego skalowanie.

komentarz 7 lipca 2020 przez lujasjeden Użytkownik (860 p.)

oh wow, wlasciwie to naprawilo to co chcialem osiagnac, ze po przekroczeniu x pixeli divy sie ukladaja 1 w rzedzie, dziekuje

odpowiedź 7 lipca 2020 przez Amatorcpp Obywatel (1,590 p.)

A nie lepiej kliknąć f12? i zobaczyć jak widać to na innych urządzeniach?

komentarz 7 lipca 2020 przez lujasjeden Użytkownik (860 p.)

a moglbys wytlumaczyc gdzie mam sie znajdowac albo cos wiecej bo klikajac f12 u mnie odblokwuje sie tylko klódka z 1 w srodku, ogolnie pewnie to oczywiste ale jestem noobem w komputery wiec prosze o wyrozumialosc XD