Responsiivisen suunnittelutilan aktivointi ja käyttö Safarissa

OS X El Capitanin Safari-versiosta 9 alkaen Apple otti käyttöön Responsive Design Mode -tilan. Tämä käyttöliittymä auttaa verkkokehittäjiä suunnittelemaan web-kokemuksia eri näyttökokoille, -suunnille ja -resoluutioille. Responsive Design auttaa kehittäjiä varmistamaan, että heidän verkkosivustonsa ja sovelluksensa tukevat useita laitteita ja alustoja. Näin otat Responsive Design -tilan käyttöön Safari-verkkoselaimessa. Tämän artikkelin tiedot koskevat Safari 13:sta Safari 9:ään macOS Catalinasta OS X El Capitaniin. Responsive Design Mode ei ole saatavilla Safarin Windows-versiossa, jota Apple ei enää tue.

Kuinka ottaa reagoiva suunnittelutila käyttöön Safarissa

Safari Responsive Design -tilan ja muiden Safari-kehittäjätyökalujen ottaminen käyttöön:

1. Siirry kohtaan Safari valikko ja valitse Asetukset† Paina pikanäppäintä Tehtäv䆆 (pilkku) päästäksesi nopeasti asetuksiin.

2. Vuonna Asetukset valintaikkunassa, valitse Pitkälle kehittynyt -välilehti.

   

3. Valitse valintaikkunan alareunasta Näytä Kehitä-valikko valikkorivillä valintaruutu.

   

4. näet nyt Kehittää Safarin ylävalikkopalkissa.

   

5. Valitse Kehittää † Aktivoi reagoiva suunnittelutila Safari-työkalurivillä. Paina pikanäppäintä Vaihtoehto†Tehtävä†R siirtyäksesi nopeasti Responsive Design -tilaan.

   Aktivoi reagoiva suunnittelutila.» luokka=»laiska kuorma» leveys =»1271″ korkeus =»859″ id=»mntl-sc-block-image_1-0-29″ †

6. Aktiivinen verkkosivu näytetään Responsive Design -tilassa. Valitse sivun yläreunasta iOS-laite tai näytön tarkkuus nähdäksesi, miltä sivu näyttää.

   

7. Voit myös nähdä, kuinka verkkosivusi näkyy eri alustoilla käyttämällä tarkkuuskuvakkeiden yläpuolella olevaa avattavaa valikkoa.

   

Safari-kehittäjätyökalut

Responsive Design Mode -tilan lisäksi Safari Develop -valikko tarjoaa muita hyödyllisiä vaihtoehtoja.

Avaa sivu sovelluksella

Avaa aktiivisen verkkosivun missä tahansa Maciin asennetussa selaimessa.

Käyttäjä agentti

Kun vaihdat käyttäjäagentin, voit huijata verkkosivuston ajattelemaan, että käytät toista selainta.

Näytä Web Inspector

Näyttää kaikki verkkosivun resurssit, mukaan lukien CSS-tiedot ja DOM-tilastot.

Näytä virhekonsoli

Näyttää JavaScript-, HTML- ja XML-virheet ja -varoitukset.

Näytä sivun lähdekoodi

Voit tarkastella aktiivisen verkkosivun lähdekoodia ja etsiä sivun sisällöstä.

Näytä sivun lähteet

Näyttää asiakirjat, komentosarjat, CSS:n ja muut nykyisen sivun resurssit.

Näytä fragmenttieditori

Voit muokata ja suorittaa koodinpätkiä. Tämä ominaisuus on hyödyllinen testauksen näkökulmasta.

Näytä laajennuksen rakennustyökalu

Auttaa rakentamaan Safari-laajennuksia pakkaamalla koodisi vastaavasti ja lisäämällä metatietoja.

Aloita aikajanan tallennus

Voit tallentaa verkkopyyntöjä, JavaScript-suorituksen, sivun renderöinnin ja muita tapahtumia WebKit Inspectoriin.

Tyhjät välimuistit

Poistaa kaikki Safariin tallennetut välimuistit, ei vain verkkosivuston oletusvälimuistitiedostoja.

Poista välimuistit käytöstä

Kun välimuisti on poistettu käytöstä, resurssit ladataan verkkosivustolta aina, kun käyttöpyyntö tehdään, toisin kuin paikallista välimuistia käytettäessä.

Salli JavaScript älykkäästä hakukentästä

Tämä ominaisuus on oletuksena poistettu käytöstä turvallisuussyistä, ja sen avulla voit kirjoittaa JavaScriptiä sisältäviä URL-osoitteita Safarin osoitepalkkiin.