Kui olete veebiarendaja või omate veebiettevõtet, võite olla huvitatud sellest, kuidas mobiilisait lauaarvutis välja näeb. Teie mobiilisaidi välimus ja funktsionaalsus võivad olla üliolulised, kuna enam kui pool Interneti-liiklusest pärineb telefonidest. Kliendid jäävad suurema tõenäosusega saidile kauemaks või ostavad midagi, kui see on visuaalselt atraktiivne. Töölauavaade võib samuti aidata teil muudatusi teha ja võimalikke probleeme varem lahendada.
Õnneks on see suhteliselt lihtne protsess. Selles artiklis näitame teile, kuidas vaadata veebisaidi mobiiliversiooni erinevates seadmetes ja brauserites.
Veebisaidi mobiiliversiooni vaatamine Maci Chrome'is
Chrome'is saate testida esiosa ja näha, kas veebisaidi kõik komponendid töötavad korralikult, kasutades sisseehitatud arendajatööriista nimega DevTools. Kuna see pakub eelmääratletud seadmevalikuid, on DevTools arendaja jaoks parim viis vaadet kiiresti töölaualt mobiilile ja vastupidi ilma arendajalaiendusteta nihutada.
Samuti saate muuta ekraani suurust vastavalt oma vajadustele ning kohandada ekraani laiust ja kõrgust, et näha, kuidas teie veebisait erinevate suurustega ekraanidel välja näeb. Selleks toimige Macis järgmiselt.
- Käivitage Google Chrome'i brauser ja minge saidile, mida soovite vaadata.
- DevToolsile juurdepääsuks vajutage klaviatuuril F12.
- Kui režiim on sisse lülitatud, klõpsake ikooni Seadme emulatsiooni sisse- ja väljalülitamine.
- Saate valida iOS-i ja Androidi seadmete loendist, et neid emuleerida.
- See kuvab veebisaiti teie valitud mobiilivormis.
Kui olete lõpetanud, sulgege lihtsalt arendajatööriistade aken, et veebisaidi mobiiliversioon sulgeda.
Veebisaidi mobiiliversiooni vaatamine Windowsi arvutis Chrome'is
Kui soovite vaadata Chrome'is Windows PC-s veebisaidi mobiiliversiooni, on see üsna sarnane protsess.
- Avage Chrome'i brauser.
- Minge Chrome'is veebisaidile, mida soovite mobiiliversioonis näha.
- Paremklõpsake veebilehel ja valige menüüst Kontrolli.
- Arendaja tööriistade avamiseks klõpsake vahekaardil Rohkem tööriistu ja valige Arendaja tööriistad või vajutage DevToolsi avamiseks klahvi F12.
- Avaneb arendaja tööriistade aken.
- Mobiilisaidi vaate režiimi lülitumiseks klõpsake seadme lülitusikooni.
- Valige mobiilseade, mida soovite jäljendada (valikuline).
- Nüüd saate muuta ekraani mõõtmeid vastavalt oma vajadustele.
Veebisaidi mobiiliversiooni vaatamine Chromebookis Chrome'is
Veebisaidi mobiiliversioonile juurdepääsemine Chrome'is Chromebooki abil on väga sarnane kahe esimese meetodiga.
- Avage Google Chrome'i veebibrauser.
- Avage oma mobiilseadmes veebileht, millele soovite juurde pääseda.
- Menüüsse pääsemiseks klõpsake vertikaalsel kolme punktiga ikooni.
- Lohistage hiirekursor loendis üksuse Rohkem tööriistu kohale.
- Valige Arendaja tööriistad.
- Avaneb brauseris arendaja tööriistade aken.
- Lülitage mobiilisaidi vaate režiim sisse, klõpsates seadme lülitusikoonil.
See avab mobiilisaidi kasutajaliidese. Samuti saate valida eelistatud seadme kasutuskogemuse, valides rippmenüüst margi ja mudeli. Veebilehte värskendatakse töölaua saidina alati, kui sulgete arendaja tööriistade konsooli.
Veebisaidi mobiiliversiooni vaatamine Maci Firefoxis
Mobiilisaidi vaatamiseks Maci töölaual saate kasutada muid veebibrausereid, nagu Firefox. Brauseriakna suuruse muutmine on üks meetoditest, mida enamik veebiarendajaid tundliku disainiga veebisaidi hindamiseks kasutavad. Kuid enamasti ei tundu see alternatiiv vastuvõetav.
Siin tulevad kasuks Firefoxi brauseri veebiarendusvõimalused. Saate sirvida oma veebilehti mitme eraldusvõimega, kui teate, kuidas Firefoxis veebisaitide mobiiliversioonidele juurde pääseda. Järgige neid samme.
- Avage veebisaidi mobiiliversioon, mida soovite näha.
- Paremklõpsake veebilehel ja valige menüüst suvand Kontrolli.
- Valige tundlik kujundusrežiim.
- Valige veebisaidi ekraani suurus.
Veebisaidi mobiiliversiooni vaatamine Windowsi arvutis Firefoxis
Windowsi arvutitel on ka võimalus vaadata Firefoxi abil veebisaitide mobiiliversioone. Seda saab teha järgmiselt.
- Käivitage arvutis Firefox.
- Minge veebisaidile, mida soovite mobiiliversioonina näha.
- Avage Seaded, klõpsates horisontaalsel kolme ribaga ikoonil.
- Näete rippmenüüd, kus peate valima veebiarendaja valiku.
- Valige tundlik kujundusrežiim.
- Lõpuks saate valida nutitelefoni mudeli, et näha, kuidas teie sait selles seadmes kuvatakse.
Veebisaidi mobiiliversiooni vaatamine Maci Safaris
Oleme käsitlenud, kuidas vaadata mobiiliveebisaiti töölaual Chrome'i ja Firefoxi abil. Aga kuidas on lood Maci seadmetega kaasas oleva vaikebrauseri Safariga? Õnneks on Safaris võimalik vaadata ka veebisaidi mobiiliversiooni.
- Käivitage Safari brauser.
- Minge veebisaidile, mida soovite mobiiliversioonina vaadata.
- Klõpsake valikul Valikud ja seejärel menüül Arenda.
- Valige rippmenüüst Sisesta tundlik kujundusrežiim.
- Nüüd saate vaadata veebisaidi mobiiliversiooni.
Täiendavad KKK
Kas ma saan oma telefonis vaadata veebisaidi töölauaversiooni?
Vastus on jah! Saate lülituda mobiiliversioonilt lauaarvuti versioonile, et kontrollida seda ilma arvutit kasutamata. Chrome'i mobiiliversiooni töölauaversioonile üleviimise toimingud on järgmised.
1. Minge veebisaidile, mida soovite töölauavaates näha.
2. Menüüsse sisenemiseks puudutage kolme punktiga ikooni.
3. Valige kohe suvand Töölauavaade.
Pidage meeles, et need sammud võivad olenevalt kasutatavast telefonist erineda.
kuidas visata esemeid robloxis 2018
Mobiilse veebi kujundamise hõlbustamine
Arendaja tööriistad on suurepärased, et analüüsida ja muuta veebisaidi mobiiliversiooni töölaual ilma seadmeid vahetamata. Saate muuta ekraani suurust, et jälgida, kuidas komponendid erinevates seadmetes töötavad. Reageeriva režiimi abil saate kohandada erinevaid komponente ja luua veebisaiti mitme ekraanisuuruse jaoks.
Veebilehe kujundamisel peaks kujundaja alati silmas pidama, kuidas saidi esiosa telefonides, tahvelarvutites ja lauaarvutites kuvatakse. Artiklis kirjeldatud meetodite kasutamine võib samuti aidata arendajal seda teha ja tuvastada, millised veebisaidi komponendid tekitavad probleeme nende lahendamiseks.
Kas olete kunagi proovinud oma töölaual vaadata saidi mobiiliversiooni? Millist brauserit eelistate selleks kasutada? Andke meile teada allpool olevas kommentaaride jaotises.