01/06
Aktivoi ja käytä Responsive Design Mode -ohjelmaa Safari 9: ssä
Web-kehittäjä nykymaailmassa tarkoittaa laitteiden ja alustojen tukemista, mikä voi joskus osoittautua pelottavaksi tehtäväksi. Jopa parhaiten suunnitellulla koodilla, joka noudattaa uusimpia verkkostandardeja, voit silti löytää, että sivustosi osat eivät välttämättä näytä tai toimivat samalla tavalla kuin haluat tietyissä laitteissa tai päätöslauselmissa. Kun kohtaat haasteen tukea tällaisia laaja valikoima skenaarioita, joilla on oikea simulointi työkaluja käytettävissänne voi olla korvaamaton.
Jos olet yksi monista ohjelmista, jotka käyttävät Macia, Safarin kehittäjätyökalu on aina tullut käteväksi. Safari 9: n julkaisun myötä tämä toimintojen leveys on laajentunut huomattavasti pääasiassa Responsive Design Mode -tilan ansiosta, jonka avulla voit esikatsella, miten sivustosi tekee eri näytön tarkkuuksilla sekä erilaisilla iPad-, iPhone- ja iPod touch -rakenteilla.
Tämä opetusohjelma kertoo kuinka aktivoida Responsive Design Mode ja miten se voidaan hyödyntää kehitystarpeistasi.
Avaa ensin Safari-selain.
02/06
Safarin asetukset
Napsauta Safarin selausvalikossa, joka sijaitsee näytön yläosassa. Kun pudotusvalikko tulee näkyviin, valitse edellä oleva esimerkki Asetukset- vaihtoehto.
Huomaa, että voit käyttää seuraavia pikanäppäimiä edellä mainitun valikkokohteen sijasta: COMMAND + COMMA (,)
03/06
Näytä kehitysvalikko
Safarin Asetukset-valintaikkunan pitäisi nyt näkyä ja selata selainikkunasi. Napsauta ensin Lisäasetukset- kuvaketta, jota edustaa vaihde ja joka sijaitsee ikkunan oikeassa yläkulmassa.
Selaimen lisäasetukset pitäisi nyt näkyä. Alla olevassa vaihtoehdossa on valintaruutu, joka on merkitty Näytä valikko -ikkunan Kehitä-valikkoon ja joka on ympyröity yllä olevassa esimerkissä. Aktivoi tämä valikko napsauttamalla valintaruutua kerran.
04/06
Anna Responsive Design Mode
Nyt on oltava uusi vaihtoehto Safari-valikossa, joka sijaitsee näytön yläreunassa ja jonka nimi on Kehitä . Napsauta tätä vaihtoehtoa. Kun pudotusvalikko tulee näkyviin, valitse yläpuolella olevassa esimerkissä valittu Enter Responsible Design Mode _.
Huomaa, että voit käyttää seuraavia pikanäppäimiä edellä mainitun valikkokohteen sijasta: OPTION + COMMAND + R
05/06
Responsive Design Mode
Aktiivinen Web-sivu pitäisi nyt näyttää Responsive Design -tilassa, kuten yllä olevassa esimerkissä on esitetty. Valitsemalla jonkin luettelossa olevista iOS-laitteista, kuten iPhone 6: sta tai jollakin määrätyistä näyttösivustosta, kuten 800 x 600, voit tarkastella heti, miten sivu näkyy kyseisellä laitteella tai näytön tarkkuudella.
Näytettävien laitteiden ja päätöslauselmien lisäksi voit myös ohjata Safariä simuloimaan eri käyttäjäagenttiä - kuten toisesta selaimesta - napsauttamalla pudotusvalikkoa, joka näkyy suoraan resoluutio-kuvakkeiden yläpuolella.
06/06
Kehitä valikko: Muut asetukset
Responsive Design -tilan lisäksi Safari 9: n Develop-valikossa on monia muita hyödyllisiä vaihtoehtoja - joitain alla lueteltuja.
- Avaa sivu:: Voit avata aktiivisen Web-sivun missä tahansa muussa Macissa asennetusta selaimesta.
- Käyttäjäagentti: Käyttäjäagentin muuttaminen aiheuttaa Web-palvelimia tunnistamaan selaimesi muuksi kuin Safari 9: ksi.
- Yhdistä Web-tarkastaja: Safari 9: n Web-tarkastaja näyttää kaikki verkkosivun resurssit, jotka mahdollistavat CSS-tietojen, DOM-tietojen ja rakenteen sekä alkuperäisen lähdekoodin koon.
- Näytä virheenkorjaus: Yksi kehitysvalikon yleisimmin käytetyistä vaihtoehdoista, tämä konsoli näyttää JavaScript-, HTML- ja XML-virheitä ja varoituksia.
- Näytä sivun lähde: Voit tarkastella ja etsiä aktiivisen Web-sivun lähdekoodia.
- Näytä sivuryhmät: Tämän vaihtoehdon valitseminen näyttää asiakirjat, komentosarjat, CSS ja muut resurssit nykyisestä sivusta.
- Show Snippet Editor: Tarjoaa mahdollisuuden muokata ja suorittaa koodinpätkiä, toisin kuin täydellinen sivu. Tämä ominaisuus on erittäin hyödyllinen testauksen näkökulmasta.
- Näytä laajennustyökalu: voit luoda omia Safari-laajennuksia pakkaamalla koodisi vastaavasti ja lisäämällä metatietoja.
- Käynnistä aikajanan tallennus: tallentaa useita kohteita, mukaan lukien verkkopyynnöt, JavaScript-suorituksen, sivun renderointi ja muut tapahtumat käyttäjän määrittämän ajan - kaikki näkyvissä WebKit-tarkastajan sisällä.
- Tyhjät välimuistit: Napsauttamalla tätä vaihtoehtoa poistetaan kaikki tallennetut välimuistit Safarissa, ei pelkästään tavallisten verkkosivustojen välimuistitiedostoja.
- Poista välimuistit käytöstä: Kun välimuistitoiminto on poistettu käytöstä, resurssit ladataan verkkosivustolta aina, kun käyttöpyyntö on tehty paikallisen välimuistin käytön sijaan.
- Salli JavaScriptiä Smart Search -kentästä: Oletusarvoisesti pois käytöstä turvallisuussyistä. Tämän toiminnon avulla voit syöttää URL-osoitteita, jotka sisältävät javascriptiä: Safarin osoiterivillä.
- Käsittele SHA-1-sertifikaatteja epävarmoina: Lyhyt Secure Hash -algoritmille, SHA-1-hash-funktio on osoittautunut epävarmemmaksi kuin alunperin ajatellut, joten lisäys tämä vaihtoehto Safari 9: ssä.
Liittyvät lukeminen
Jos löydät tämän oppitunnin hyödylliseksi, muista tarkistaa muut Safarin 9 läpiviennit.
- Kuinka hallita verkkosivujen push-ilmoituksia
- Web-sivun vieminen PDF-tiedostoon
- Safarien 9 laajennusten määrittäminen automaattisesti päivittämään
- Pinnatettujen sivustojen ominaisuuden käyttäminen