Cum se activează și se folosește modul de design receptiv în Safari 9

01 din 06

Activați și utilizați modul de design receptiv în Safari 9

© Scott Orgera.

Fiind un dezvoltator de web în lumea de azi înseamnă a susține o mulțime de dispozitive și platforme, care uneori se dovedesc a fi o sarcină descurajantă. Chiar și cu cel mai bine conceput cod care respectă cele mai recente standarde Web, puteți totuși să constatați că porțiunile din site-ul dvs. nu ar putea să pară sau să acționeze așa cum doriți pe anumite dispozitive sau rezoluții. Atunci când se confruntă cu provocarea de a sprijini o astfel de gamă largă de scenarii, având instrumentele de simulare potrivite la dispoziția dumneavoastră poate fi de neprețuit.

Dacă sunteți unul dintre mulții programatori care folosesc un Mac, setul de instrumente pentru dezvoltatori al Safari a venit întotdeauna la îndemână. Odată cu lansarea Safari 9, această latură a acestei funcționalități sa extins considerabil, în special datorită Modului de Design Responsabil, care vă permite să previzualizați modul în care site-ul dvs. va reda la diferite rezoluții ale ecranului, precum și pe diferite dispozitive iPad, iPhone și iPod touch.

Acest tutorial detaliază cum să activați modul de design receptiv, precum și cum să îl utilizați pentru nevoile dvs. de dezvoltare.

Mai întâi, deschideți browserul Safari.

02 din 06

Safari Preferințe

© Scott Orgera.

Faceți clic pe Safari din meniul browserului, situat în partea de sus a ecranului. Când apare meniul drop-down, selectați opțiunea Preferințe_ învârtită în exemplul de mai sus.

Rețineți că puteți utiliza următoarea comandă rapidă de la tastatură în locul elementului de mențiune menționat mai sus: COMMAND + COMMA (,)

03 din 06

Afișați meniul de dezvoltare

© Scott Orgera.

Dialogul preferințelor Safari ar trebui afișat acum, suprapunând fereastra browserului. Mai întâi, faceți clic pe pictograma Complex_ reprezentată de o unelte și situată în colțul din dreapta sus al ferestrei.

Preferințele avansate ale browserului ar trebui să fie acum vizibile. În partea de jos este o opțiune însoțită de o casetă de bifare, etichetată cu meniul Afișați evoluția din bara de meniu și este înconjurată în exemplul de mai sus. Dați clic pe o dată pe caseta de selectare pentru a activa acest meniu.

04 din 06

Introduceți modul de proiectare receptiv

© Scott Orgera.

O nouă opțiune ar trebui să fie acum disponibilă în meniul Safari, situat în partea de sus a ecranului, numit Dezvoltare . Faceți clic pe această opțiune. Când apare meniul drop-down, selectați Modul de design receptiv _ cuplat în exemplul de mai sus.

Rețineți că puteți utiliza următoarea comandă rapidă de la tastatură în locul elementului de meniu menționat mai sus: OPTION + COMMAND + R

05 din 06

Mod responsiv de proiectare

© Scott Orgera.

Pagina Web activă ar trebui să fie afișată acum în modul Responsabil de proiectare, așa cum se arată în exemplul de mai sus. Prin selectarea unuia dintre dispozitivele iOS enumerate, cum ar fi iPhone 6 sau una dintre rezoluțiile desemnate ale ecranului, cum ar fi 800 x 600, puteți vizualiza imediat modul în care va afișa pagina pe respectivul dispozitiv sau în acea rezoluție a afișajului.

Pe lângă dispozitivele și rezoluțiile afișate, puteți să instruiți și Safari să simuleze un alt agent utilizator - cum ar fi unul dintr-un browser diferit - făcând clic pe meniul derulant afișat direct deasupra pictogramelor de rezoluție.

06 din 06

Dezvoltați meniul: Alte opțiuni

© Scott Orgera.

În plus față de modul de design receptiv, meniul Safari 9's Develop oferă multe alte opțiuni utile, unele care sunt enumerate mai jos.

Citire asemănătoare

Dacă ați descoperit acest tutorial util, asigurați-vă că verificați celelalte instrucțiuni despre Safari 9.