Program do podglądu strony na różnych wielkościach monitorów

Czy kiedykolwiek zastanawiałeś się, jak Twoja strona wygląda na innych urządzeniach? Może na mniejszym ekranie smartfona lub na ogromnym monitorze ultrapanoramicznym? Dziś pokażę Ci, jak możesz to sprawdzić w prosty sposób. Nawet jeśli nie jesteś programistą, zaraz dowiesz się, jak korzystać z narzędzi i stworzyć prosty program, który to umożliwi. Gotowy? Zaczynajmy!

Dlaczego podgląd na różnych rozmiarach ekranu jest ważny?

Obecnie ludzie korzystają z internetu na różnych urządzeniach – od małych smartfonów przez tablety po duże monitory komputerowe. Dla właścicieli stron internetowych oznacza to jedno: strona musi wyglądać dobrze wszędzie. Jeśli użytkownik odwiedzi witrynę, która jest nieczytelna na jego telefonie, to prawdopodobnie szybko ją opuści. A tego na pewno nie chcesz.

Dlatego warto sprawdzać, jak Twoja strona wygląda na różnych rozdzielczościach. A najlepsze jest to, że możesz to zrobić szybko, bez zbędnego kombinowania.

Jak to zrobić? Narzędzia, które musisz poznać

Nie musisz instalować skomplikowanego oprogramowania. Wystarczy Ci jedna z dwóch rzeczy:

1. Tryb deweloperski w przeglądarce

Większość nowoczesnych przeglądarek (Google Chrome, Firefox, Edge) ma wbudowaną funkcję pozwalającą na podgląd strony w różnych rozdzielczościach.

Jak to zrobić w Chrome?

Otwórz stronę, którą chcesz przetestować.
Kliknij prawym przyciskiem myszy i wybierz „Zbadaj” (lub naciśnij Ctrl + Shift + I).
Na górnym pasku kliknij ikonę „Przełącz tryb urządzenia” (wygląda jak mały telefon i tablet obok siebie).
Wybierz jedno z predefiniowanych urządzeń lub ustaw własną rozdzielczość.

2. Specjalistyczne programy i aplikacje

Chcesz mieć więcej opcji? Są narzędzia takie jak:

Responsively App – darmowy program, który pokazuje Twoją stronę w wielu rozdzielczościach jednocześnie.
Screenfly – narzędzie online, które pozwala testować strony na różnych urządzeniach.
BrowserStack – zaawansowane narzędzie do testowania stron na różnych urządzeniach, ale w wersji darmowej ma ograniczenia.

3. Twój własny program

A może chcesz stworzyć swój własny prosty program do tego celu? Nie martw się – pokażę Ci, jak to zrobić krok po kroku.

Tworzymy własny program: Podgląd stron na różnych rozdzielczościach

Dla tego projektu wykorzystamy HTML, CSS i odrobinę JavaScriptu. Będzie to prosty, ale funkcjonalny podgląd stron. Oto, jak możesz go stworzyć.

Kod HTML

Zacznijmy od stworzenia podstawowego pliku HTML, który będzie miał możliwość wczytania dowolnej strony i pokazania jej w różnych rozmiarach.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Podgląd stron</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #url-input {
            width: 100%;
            padding: 10px;
            font-size: 16px;
        }
        #preview-container {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
        .frame {
            border: 1px solid #ccc;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <h1>Podgląd stron na różnych rozdzielczościach</h1>
    <input id="url-input" type="text" placeholder="Wpisz adres URL i naciśnij Enter" />
    <div id="preview-container">
        <div class="frame" style="width: 320px; height: 480px;">
            <iframe id="mobile-frame" src="" width="100%" height="100%"></iframe>
            <p>Mobile (320x480)</p>
        </div>
        <div class="frame" style="width: 768px; height: 1024px;">
            <iframe id="tablet-frame" src="" width="100%" height="100%"></iframe>
            <p>Tablet (768x1024)</p>
        </div>
        <div class="frame" style="width: 1920px; height: 1080px;">
            <iframe id="desktop-frame" src="" width="100%" height="100%"></iframe>
            <p>Desktop (1920x1080)</p>
        </div>
    </div>

    <script>
        const urlInput = document.getElementById('url-input');
        const mobileFrame = document.getElementById('mobile-frame');
        const tabletFrame = document.getElementById('tablet-frame');
        const desktopFrame = document.getElementById('desktop-frame');

        urlInput.addEventListener('keypress', function (e) {
            if (e.key === 'Enter') {
                const url = urlInput.value.startsWith('http') ? urlInput.value : `https://${urlInput.value}`;
                mobileFrame.src = url;
                tabletFrame.src = url;
                desktopFrame.src = url;
            }
        });
    </script>
</body>
</html>

Jak to działa?

Po wpisaniu adresu URL i naciśnięciu Enter, strona wczytuje się w trzech różnych rozmiarach:
- Mobile: 320×480
- Tablet: 768×1024
- Desktop: 1920×1080
Kod iframe pozwala na osadzenie dowolnej strony wewnątrz aplikacji.
Dzięki prostemu CSS uzyskujemy przejrzysty układ.

Zalety własnego rozwiązania

Tworzenie własnego programu daje Ci pełną kontrolę. Możesz:

Dodać więcej rozdzielczości.
Zmienić style, aby lepiej pasowały do Twoich potrzeb.
Zintegrować to z innymi narzędziami, np. sprawdzaniem szybkości ładowania strony.

Co dalej?

Jeśli ten prosty projekt Cię zaciekawił, możesz go rozbudować. Na przykład:

Dodaj przycisk do zapisywania zrzutów ekranu w różnych rozdzielczościach.
Zintegruj API do testowania wydajności strony, np. Google PageSpeed Insights.
Stwórz bardziej zaawansowany interfejs z dodatkowymi funkcjami.

Podsumowanie

Testowanie wyglądu stron na różnych rozdzielczościach to podstawa w dzisiejszym świecie, gdzie urządzenia mobilne dominują. Niezależnie od tego, czy korzystasz z wbudowanych funkcji przeglądarki, specjalnych aplikacji, czy tworzysz własne narzędzie – masz teraz wszystko, czego potrzebujesz, aby Twoja strona wyglądała świetnie na każdym ekranie.

Więc na co czekasz? Sprawdź swoją stronę już teraz i daj znać, jakie rozwiązanie najbardziej przypadło Ci do gustu!