A webhely mobil verziójának megtekintése számítógépen

Ha Ön webfejlesztő vagy online vállalkozása van, akkor kíváncsi lehet, hogyan néz ki egy mobilwebhely asztali számítógépen. A mobilwebhely megjelenése és funkcionalitása kulcsfontosságú lehet, mivel az internetes forgalom több mint fele telefonokról érkezik. Az ügyfelek nagyobb valószínűséggel maradnak tovább a webhelyen, vagy vásárolnak valamit, ha az látványosan vonzó. Az asztali nézet is segíthet a szerkesztésekben és a lehetséges problémák mielőbbi kijavításában.

Szerencsére ez egy viszonylag egyszerű folyamat. Ebben a cikkben bemutatjuk, hogyan tekintheti meg egy webhely mobil verzióját különböző eszközökön és böngészőkön.

A webhely mobilverziójának megtekintése a Chrome böngészőben Mac számítógépen

A Chrome-ban a DevTools nevű beépített fejlesztői eszköz segítségével tesztelheti a kezelőfelületet, és megnézheti, hogy a webhely összes összetevője megfelelően működik-e. Mivel előre definiált eszközválasztási lehetőséget biztosít, a DevTools a legjobb módja annak, hogy a fejlesztő gyorsan áthelyezhesse a nézetet asztali számítógépről mobilra és fordítva, fejlesztői bővítmények nélkül.

Módosíthatja a képernyő méretét az igényeinek megfelelően, és módosíthatja a képernyő szélességét és magasságát, hogy megtudja, hogyan fog kinézni webhelye különböző képernyőméreteken. Ha ezt Mac számítógépen szeretné megtenni, kövesse az alábbi lépéseket:

1. Indítsa el a Google Chrome böngészőt, és lépjen a megtekinteni kívánt webhelyre.
   
2. Nyomja meg az F12 billentyűt a billentyűzeten a DevTools eléréséhez.
   
3. Ha az üzemmód be van kapcsolva, kattintson az Eszközemuláció váltása ikonra.
   
4. Az iOS és Android eszközök listájából választhat emulációjukat.
   
5. Megjeleníti a webhelyet az Ön által kiválasztott mobil formában.
   

Ha végzett, egyszerűen zárja be a fejlesztői eszközök ablakát a webhely mobil verziójának bezárásához.

Webhely mobilverziójának megtekintése a Chrome böngészőben Windows PC-n

Ha egy webhely mobil verzióját szeretné megtekinteni a Windows PC-n a Chrome-ban, ez nagyjából hasonló folyamat:

1. Nyissa meg a Chrome böngészőt.
   
2. A Chrome-ban lépjen arra a webhelyre, amelyet a mobil verzióban szeretne látni.
3. Kattintson a jobb gombbal a weboldalra, és válassza a menü Vizsgálat parancsát.
   
4. A Fejlesztői eszközök megnyitásához kattintson a További eszközök fülre, és válassza a Fejlesztői eszközök lehetőséget, vagy nyomja meg az F12 billentyűt a DevTools megnyitásához.
   
5. Megnyílik a Fejlesztői eszközök ablak.
6. Kattintson az Eszköz váltó ikonra a mobilwebhely-nézet módba való váltáshoz.
   
7. Válassza ki az emulálni kívánt mobileszközt (opcionális).
   
8. Mostantól igényeinek megfelelően módosíthatja a képernyő méreteit.

Webhely mobilverziójának megtekintése Chromebookon a Chrome böngészőben

Egy webhely mobil verziójának elérése a Chrome-ban Chromebook segítségével nagyon hasonló az első két módszerhez.

1. Nyissa meg a Google Chrome böngészőt.
   
2. Nyissa meg azt a weboldalt, amelyet el szeretne érni mobileszközén.
   
3. A menü eléréséhez kattintson a függőleges három pont ikonra.
   
4. Húzza az egeret a További eszközök elemre a listában.
   
5. Válassza a Fejlesztői eszközök lehetőséget.
   
6. Megnyílik a Fejlesztői eszközök ablaka a böngészőben.
   
7. Váltsa át a mobilwebhely-nézet módot az Eszköz kapcsoló ikonra kattintva.
   

Ezzel megjelenik a mobilwebhely felhasználói felülete. Kiválaszthatja az előnyben részesített eszközélményt is a legördülő menüből a gyártmány és a modell kiválasztásával. A weboldal asztali webhelyként frissül, amikor bezárja a fejlesztői eszközök konzolját.

Webhely mobilverziójának megtekintése Mac számítógépen a Firefoxban

Más webböngészők, például a Firefox használatával is megtekinthet mobilwebhelyeket Mac asztali számítógépen. A böngészőablak átméretezése az egyik módszer, amellyel a legtöbb webfejlesztő értékeli a reszponzív tervezésű webhelyet. Ez az alternatíva azonban legtöbbször nem tűnik elfogadhatónak.

Itt jönnek jól a Firefox böngésző webfejlesztési lehetőségei. Több felbontásban is böngészhet weboldalain, ha tudja, hogyan érheti el a webhelyek mobil verzióit a Firefoxban. Kovesd ezeket a lepeseket:

1. Nyissa meg a megtekinteni kívánt webhely mobil verzióját.
2. Kattintson a jobb gombbal a weboldalra, és válassza a menüből az Inspect opciót.
   
3. Válassza ki a Reszponzív tervezési módot.
   
4. Válassza ki a webhely képernyőméretét.
   

Webhely mobilverziójának megtekintése Firefoxban Windows PC-n

A Windows rendszerű számítógépeken lehetőség van webhelyek mobil verzióinak megtekintéséhez a Firefox segítségével. A következőképpen teheti meg:

1. Indítsa el a Firefoxot a számítógépén.
   
2. Nyissa meg azt a webhelyet, amelyet mobil verzióként szeretne látni.
   
3. A vízszintes háromsávos ikonra kattintva lépjen a Beállítások menübe.
   
4. Megjelenik egy legördülő menü, ahol ki kell választania egy Web Developer opciót.
   
5. Válassza az adaptív tervezési módot.
   
6. Végül kiválaszthat egy okostelefon-modellt, hogy megnézze, hogyan fog megjelenni webhelye az adott eszközön.
   

A webhely mobilverziójának megtekintése a Safari alkalmazásban Mac számítógépen

Bemutattuk, hogyan tekinthet meg mobilwebhelyet asztali számítógépen Chrome és Firefox használatával. De mi a helyzet a Mac-eszközökhöz tartozó alapértelmezett böngészővel, a Safarival? Szerencsére a Safariban is meg lehet tekinteni egy webhely mobil verzióját.

1. Indítsa el a Safari böngészőt.
   
2. Nyissa meg a webhelyet, amelyet mobil verzióként szeretne megtekinteni.
   
3. Kattintson az Opciók, majd a Fejlesztés menüre.
   
4. A legördülő menüből válassza a Belépés az adaptív tervezési módba lehetőséget.
   
5. Most megtekintheti a webhely mobil verzióját.
   

További GYIK

Megtekinthetem egy webhely asztali verzióját a telefonomon?

A válasz igen! A mobil verzióról az asztali verzióra válthat, és számítógép használata nélkül is megnézheti. A Chrome-ban a mobilverzió asztali verzióra való átállításának lépései a következők:

1. Nyissa meg azt a webhelyet, amelyet asztali nézetben szeretne látni.

2. Érintse meg a hárompontos ikont a menü eléréséhez.

3. Most válassza a Desktop View opciót.

Ne feledje, hogy ezek a lépések a használt telefontól függően változhatnak.

hogyan lehet egy doc szót elmenteni JPG-ként

A mobilweb tervezésének megkönnyítése

A fejlesztői eszközök nagyszerűek egy webhely mobil verziójának elemzéséhez és módosításához asztali számítógépen, eszközváltás nélkül. Módosíthatja a képernyő méretét, hogy megfigyelje, hogyan működnek az összetevők a különböző eszközökön. A reszponzív mód segítségével beállíthatja a különböző összetevőket, és létrehozhatja a webhelyet több képernyőmérethez.

A weboldal tervezése során a tervezőnek mindig szem előtt kell tartania, hogyan jelenik meg az oldal eleje telefonokon, táblagépeken és asztali számítógépeken. A cikkben ismertetett módszerek használata segíthet a fejlesztőnek ebben, és abban is, hogy azonosítsa, a webhely mely összetevői okoznak problémákat a megoldásukhoz.

Próbálta már megtekinteni egy webhely mobil verzióját az asztali számítógépén? Melyik böngészőt használja inkább ehhez? Tudassa velünk az alábbi megjegyzések részben.