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:
- Indítsa el a Google Chrome böngészőt, és lépjen a megtekinteni kívánt webhelyre.
- Nyomja meg az F12 billentyűt a billentyűzeten a DevTools eléréséhez.
- Ha az üzemmód be van kapcsolva, kattintson az Eszközemuláció váltása ikonra.
- Az iOS és Android eszközök listájából választhat emulációjukat.
- 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:
- Nyissa meg a Chrome böngészőt.
- A Chrome-ban lépjen arra a webhelyre, amelyet a mobil verzióban szeretne látni.
- Kattintson a jobb gombbal a weboldalra, és válassza a menü Vizsgálat parancsát.
- 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.
- Megnyílik a Fejlesztői eszközök ablak.
- Kattintson az Eszköz váltó ikonra a mobilwebhely-nézet módba való váltáshoz.
- Válassza ki az emulálni kívánt mobileszközt (opcionális).
- 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.
- Nyissa meg a Google Chrome böngészőt.
- Nyissa meg azt a weboldalt, amelyet el szeretne érni mobileszközén.
- A menü eléréséhez kattintson a függőleges három pont ikonra.
- Húzza az egeret a További eszközök elemre a listában.
- Válassza a Fejlesztői eszközök lehetőséget.
- Megnyílik a Fejlesztői eszközök ablaka a böngészőben.
- 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:
- Nyissa meg a megtekinteni kívánt webhely mobil verzióját.
- Kattintson a jobb gombbal a weboldalra, és válassza a menüből az Inspect opciót.
- Válassza ki a Reszponzív tervezési módot.
- 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:
- Indítsa el a Firefoxot a számítógépén.
- Nyissa meg azt a webhelyet, amelyet mobil verzióként szeretne látni.
- A vízszintes háromsávos ikonra kattintva lépjen a Beállítások menübe.
- Megjelenik egy legördülő menü, ahol ki kell választania egy Web Developer opciót.
- Válassza az adaptív tervezési módot.
- 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.
- Indítsa el a Safari böngészőt.
- Nyissa meg a webhelyet, amelyet mobil verzióként szeretne megtekinteni.
- Kattintson az Opciók, majd a Fejlesztés menüre.
- A legördülő menüből válassza a Belépés az adaptív tervezési módba lehetőséget.
- 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.
