Kuinka tarkastella verkkosivuston mobiiliversiota tietokoneella

Jos olet verkkokehittäjä tai omistat verkkoyrityksen, saatat olla utelias tietämään, miltä mobiilisivusto näyttää tietokoneella. Mobiilisivustosi ulkonäkö ja toimivuus voivat olla ratkaisevia, sillä yli puolet Internet-liikenteestä tulee puhelimista. Asiakkaat viipyvät todennäköisemmin sivustolla pidempään tai ostavat jotain, jos se näyttää visuaalisesti houkuttelevalta. Työpöytänäkymä voi myös auttaa sinua tekemään muokkauksia ja korjaamaan mahdollisia ongelmia nopeammin.

Onneksi tämä on suhteellisen yksinkertainen prosessi. Tässä artikkelissa näytämme, kuinka voit tarkastella verkkosivuston mobiiliversiota eri laitteilla ja selaimilla.

Verkkosivuston mobiiliversion tarkasteleminen Macin Chromessa

Chromessa voit testata käyttöliittymää ja nähdä, toimivatko kaikki verkkosivuston osat oikein käyttämällä sisäänrakennettua DevTools-nimistä kehittäjätyökalua. Koska DevTools tarjoaa ennalta määritettyjä laitevaihtoehtoja, se on kehittäjälle paras tapa siirtää näkymää nopeasti pöytäkoneesta mobiililaitteelle ja päinvastoin ilman kehittäjälaajennuksia.

Voit myös muuttaa näytön kokoa tarpeidesi mukaan ja säätää näytön leveyttä ja korkeutta nähdäksesi, miltä verkkosivustosi näyttää erikokoisilla näytöillä. Voit tehdä sen Macissa seuraavasti:

1. Käynnistä Google Chrome -selain ja siirry sivustolle, jota haluat tarkastella.
   
2. Paina näppäimistön F12 päästäksesi DevToolsiin.
   
3. Kun tila on käytössä, napsauta Toggle Device Emulation -kuvaketta.
   
4. Voit valita iOS- ja Android-laitteiden luettelosta emuloidaksesi niitä.
   
5. Se näyttää verkkosivuston valitsemassasi mobiilimuodossa.
   

Kun olet valmis, sulje vain kehittäjätyökalujen ikkuna sulkeaksesi verkkosivuston mobiiliversion.

Web-sivuston mobiiliversion tarkasteleminen Chromessa Windows-tietokoneessa

Jos haluat tarkastella verkkosivuston mobiiliversiota Windows PC:ssä Chromessa, se on melko samanlainen prosessi:

1. Avaa Chrome-selain.
   
2. Siirry Chromessa verkkosivustolle, jonka haluat nähdä mobiiliversiossa.
3. Napsauta verkkosivua hiiren kakkospainikkeella ja valitse valikosta Tarkista.
   
4. Siirry kehittäjätyökaluihin napsauttamalla Lisää työkaluja -välilehteä ja valitsemalla Kehittäjätyökalut tai painamalla F12 avataksesi DevTools.
   
5. Kehittäjätyökalut-ikkuna avautuu.
6. Napsauta laitteen vaihtokuvaketta vaihtaaksesi mobiilisivuston katselutilaan.
   
7. Valitse mobiililaite, jota haluat emuloida (valinnainen).
   
8. Voit nyt muokata näytön mittoja tarpeidesi mukaan.

Verkkosivuston mobiiliversion tarkasteleminen Chromebookin Chromessa

Verkkosivuston mobiiliversion käyttäminen Chromessa Chromebookilla on hyvin samanlainen kuin kaksi ensimmäistä tapaa.

1. Avaa Google Chrome -selain.
   
2. Avaa verkkosivu, jota haluat käyttää mobiililaitteellasi.
   
3. Pääset valikkoon napsauttamalla pystysuoraa kolmen pisteen kuvaketta.
   
4. Vedä hiiri luettelossa Lisää työkaluja -kohdan päälle.
   
5. Valitse Kehittäjän työkalut.
   
6. Kehittäjätyökalut-ikkuna avautuu selaimessa.
   
7. Vaihda mobiilisivuston näyttötilaa napsauttamalla laitteen vaihtokuvaketta.
   

Tämä tuo esiin mobiilisivuston käyttöliittymän. Voit myös valita haluamasi laitekokemuksen valitsemalla merkin ja mallin pudotusvalikosta. Verkkosivu päivittyy työpöytäsivustoksi aina, kun suljet kehittäjätyökalujen konsolin.

Verkkosivuston mobiiliversion tarkasteleminen Firefoxissa Macissa

Voit käyttää muita verkkoselaimia, kuten Firefoxia, tarkastellaksesi mobiilisivustoa Mac-työpöydällä. Selainikkunan koon muuttaminen on yksi menetelmistä, joita useimmat verkkokehittäjät käyttävät arvioidakseen responsiivisen suunnittelun verkkosivustoa. Useimmiten tämä vaihtoehto ei kuitenkaan vaikuta hyväksyttävältä.

Siellä Firefox-selaimen verkkokehitysominaisuudet ovat hyödyllisiä. Voit selata verkkosivujasi useilla resoluutioilla, jos tiedät, kuinka pääset Firefoxissa verkkosivustojen mobiiliversioihin. Toimi seuraavasti:

1. Avaa haluamasi verkkosivuston mobiiliversio.
2. Napsauta verkkosivua hiiren kakkospainikkeella ja valitse valikosta Tarkista-vaihtoehto.
   
3. Valitse Responsiivinen suunnittelutila.
   
4. Valitse verkkosivuston näytön koko.
   

Web-sivuston mobiiliversion tarkasteleminen Firefoxissa Windows-tietokoneessa

Windows-tietokoneissa on myös mahdollisuus tarkastella verkkosivustojen mobiiliversioita Firefoxin avulla. Näin voit tehdä sen:

1. Käynnistä Firefox tietokoneellasi.
   
2. Siirry verkkosivustolle, jonka haluat nähdä mobiiliversiona.
   
3. Siirry asetuksiin napsauttamalla vaakasuuntaista kolmen palkin kuvaketta.
   
4. Näet avattavan valikon, jossa sinun on valittava Web Developer -vaihtoehto.
   
5. Valitse Responsiivinen suunnittelutila.
   
6. Lopuksi voit valita älypuhelimen mallin nähdäksesi, miltä sivustosi näyttää kyseisellä laitteella.
   

Verkkosivuston mobiiliversion tarkasteleminen Safarissa Macissa

Olemme käsitelleet mobiilisivuston katselemista työpöydällä Chromen ja Firefoxin avulla. Mutta entä Mac-laitteiden mukana tuleva oletusselain, Safari? Onneksi Safarissa on mahdollista tarkastella myös verkkosivuston mobiiliversiota.

1. Käynnistä Safari-selain.
   
2. Siirry verkkosivustolle, jota haluat tarkastella mobiiliversiona.
   
3. Napsauta Asetukset ja sitten Kehitä-valikkoa.
   
4. Valitse avattavasta valikosta Siirry reagoivaan suunnittelutilaan.
   
5. Voit nyt tarkastella verkkosivuston mobiiliversiota.
   

Muita usein kysyttyjä kysymyksiä

Voinko tarkastella verkkosivuston työpöytäversiota puhelimellani?

Vastaus on kyllä! Voit siirtyä mobiiliversiosta työpöytäversioon ja tarkistaa sen ilman tietokonetta. Vaiheet mobiiliversion siirtämiseksi työpöytäversioon Chromessa ovat seuraavat:

1. Siirry verkkosivustolle, jonka haluat nähdä työpöytänäkymässä.

2. Napauta kolmen pisteen kuvaketta päästäksesi valikkoon.

3. Valitse nyt Desktop View -vaihtoehto.

Muista, että nämä vaiheet voivat vaihdella käyttämäsi puhelimen mukaan.

siirtää valokuvia iPhonesta tietokoneeseen

Helpota mobiiliverkkosuunnittelua

Kehittäjätyökalut ovat mahtavia analysoida ja muokata verkkosivuston mobiiliversiota työpöydällä ilman laitteiden vaihtamista. Voit muuttaa näytön kokoa nähdäksesi kuinka komponentit toimivat eri laitteissa. Responsiivisen tilan avulla voit säätää eri komponentteja ja luoda verkkosivuston useille näyttökokoille.

Sivustoa suunnitellessa suunnittelijan tulee aina pitää mielessä, miten sivuston etuosa näkyy puhelimissa, tableteissa ja pöytätietokoneissa. Artikkelissa kuvattujen menetelmien käyttäminen voi myös auttaa kehittäjää tekemään niin ja myös tunnistamaan, mitkä verkkosivuston osat aiheuttavat ongelmia niiden korjaamiseksi.

Oletko koskaan yrittänyt katsella sivuston mobiiliversiota työpöydälläsi? Mitä selainta käytät mieluiten tähän? Kerro meille alla olevassa kommenttiosassa.