Mobiililaitteet muodostavat jo valtavan osan, jos ei suurimman osan, monien verkkosivustojen online-lukijakunnasta, joten on ensiarvoisen tärkeää varmistaa, että sivustosi näyttää ja toimii oikein iPhonessa tai tablet-laitteessa. Monet palvelut tarjoavat mobiilin ulkoasun esikatselun tietylle URL-osoitteelle, mutta Apple helpotti verkkosivustojen mobiilivalmiuden testaamista paljon helpommin OS X El Capitan Safari 9: n avulla. Uusi ominaisuus, nimeltään Responsive Design Mode, voi nopeasti esikatsella verkkosivuston ulkonäköä useissa Apple-laitteissa sekä yleisiä mobiililaitteen näytön tarkkuuksia. Näin se toimii.
On tärkeää toistaa, että Responsive Design Mode on uusi ominaisuus, joka on yksinomainen Safari 9: lle OS X El Capitanissa, joten sinun on käytettävä vähintään näitä selaimen ja käyttöjärjestelmän versioita käyttääksesi sitä. Jos Mac täyttää tämän vaatimuksen, sinun on ensin otettava käyttöön Safarin kehittäjätila. Käynnistä Safari ja napsauta valikkorivin Safari . Valitse sitten Asetukset> Lisäasetukset .
Valitse Safarin Asetukset-ikkunan Lisäasetukset-välilehdessä ”Näytä kehitä valikko valikkopalkissa” -valintaruutu. Koska vaihtoehdon nimi viittaa, näet uuden ”Kehitä” -valikon Safari-valikkopalkissa oikealla puolella. ”kirjanmerkit.”
Sulje seuraavaksi Safari-asetukset-ikkuna ja siirry verkkosivustolle, jonka haluat testata Responsive Design -tilassa. Kun verkkosivusto on ladattu täydellisesti selaimeesi, käytä pikanäppäintä Command-Option-R ja näet selainikkunan muuntuvan esikatseluksi yhdeksi useista mobiililaitteiden resoluutioista (voit käyttää myös Responsive Design Mode -tilaa napsauttamalla kehittää sisään Safari-valikkopalkista ja valitsemalla Enter Responsive Design Mode ).
Safari Responsive Design -tilassa voit esikatsella, kuinka verkkosivusto näyttää kaikilta Applen mobiililaitteiden resoluutioilta 3, 5 tuuman iPhone 4S: stä 12, 9 tuuman iPad Pro: iin. Käyttäjät voivat myös valita 1x, 2x tai 3x “Retina” -resoluution ja vaihtaa selainagentin jäljittelemään suosituimpien selainten, kuten Chromen, Firefoxin ja Edgen, käyttäytymistä.
Kullakin laitteella ja näytön koosta käyttäjät voivat napsauttaa laitekuvaketta vaihtaaksesi pystysuuntaisen ja vaakasuunnan välillä tai laitteissa, kuten iPad Air ja iPad Pro, jotka tukevat jaettua näkymää, voit napsauttaa kääntääksesi eri jaetun näkymän asettelujen välillä.
Vaikka Safari Responsive Design -tilasta puuttuu joitain vaihtoehtoja samanlaisista olemassa olevista työkaluista, sen suoraan sisäänrakentaminen Safariin voi olla valtava ajan säästö verkkosuunnittelijoille ja loistava oppimis- ja testaustyökalu verkkosivustojen omistajille, jotka haluavat varmistaa, että heidän kävijöensä saavat parhaan kokemuksen näytön tarkkuudesta tai koosta riippumatta.
Kun olet testannut, voit poistua Responsive Design Mode -tilasta sulkemalla selainikkunan tai välilehden tai painamalla pikavalintaa Command-Option-R uudelleen.
