Skip to main content

Kako aktivirati in uporabiti način odzivnega oblikovanja v Safari 9

Anonim

Ker je spletni razvijalec v današnjem svetu, pomeni podporo napravam in platformam, ki se včasih lahko izkažejo za zastrašujoče naloge. Tudi z najbolj dobro oblikovanimi kodami, ki se držijo najnovejših spletnih standardov, lahko še vedno ugotovite, da deli vašega spletnega mesta morda ne bodo videti ali delovali tako, kot bi jih želeli, na določenih napravah ali resolucijah. Ko se soočate z izzivom podpore tako širokega nabora scenarijev, lahko imaš na razpolago ustrezna orodja za simulacijo, ki so neprecenljiva.

Če ste eden od mnogih programerjev, ki uporabljajo Mac, je programska oprema za razvijalce Safari vedno prižgala. S sproščanjem Safari 9 se je obseg te funkcionalnosti znatno razširil, predvsem zaradi načina odzivnega oblikovanja, ki vam omogoča, da predogledate, kako bo vaše spletno mesto prikazalo različne ločljivosti zaslona, ​​kot tudi na različnih izdelkih za iPad, iPhone in iPod touch.

Ta vadnica podrobno opisuje, kako aktivirati Načrt odzivnega oblikovanja in kako jo uporabiti za vaše razvojne potrebe.

01 od 05

Nastavitve Safari

Najprej odprite brskalnik Safari.

Kliknite na Safari v meniju brskalnika, ki se nahaja na vrhu zaslona. Ko se prikaže spustni meni, izberite Nastavitve možnost je krožila v prikazanem primeru.

Opomba: Namesto zgornjega elementa menija lahko uporabite naslednjo bližnjico na tipkovnici: COMMAND + COMMA (,)

02 od 05

Pokaži razvojni meni

Sedaj bi bilo treba prikazati pogovorno okno Safari's Preferences, prekrivanje okna brskalnika. Najprej kliknite na Napredno ikona, ki jo predstavlja orodje in se nahaja v zgornjem desnem kotu okna.

Zdaj je treba videti napredne nastavitve brskalnika. Na dnu je možnost, ki jo spremlja potrditveno polje, označeno Pokaži meni Razvijal v menijski vrstici in zaokrožila v zgornjem primeru. Za potrditev tega menija kliknite enkrat.

03 od 05

Vstopite v način odzivnega oblikovanja

Nova izbira mora biti zdaj na voljo v meniju Safari, ki je na vrhu zaslona, ​​označena Razviti. Kliknite to možnost.

Ko se prikaže spustni meni, izberite Vstopite v način odzivnega oblikovanjakrožijo v prikazanem primeru.

Opomba: Namesto zgornjega elementa menija lahko uporabite naslednjo bližnjico na tipkovnici:OPTION + COMMAND + R

04 od 05

Odzivni način oblikovanja

Aktivna spletna stran mora zdaj biti prikazana v načinu odzivnega oblikovanja, kot je prikazano v zgornjem primeru. Če izberete eno od naštetih naprav iOS, na primer iPhone 6 ali eno od določenih razpoložljivih ločljivosti zaslona, ​​na primer 800 x 600, lahko takoj vidite, kako bo stran prikazala na tej napravi ali v tej ločljivosti zaslona.

Poleg prikazanih naprav in resolucij lahko Safari naložite tudi simulacijo drugega uporabniškega posrednika, na primer enega iz drugega brskalnika, tako da kliknete spustni meni, ki je prikazan neposredno nad ikonami resolucije.

05 od 05

Razviti meni: druge možnosti

Poleg načina odzivnega oblikovanja v meniju Razvoj Safari 9 ponuja še veliko drugih uporabnih možnosti, od katerih so nekatere navedene spodaj.

  • Odpri stran z: Omogoča, da odprete aktivno spletno stran v katerem koli drugem brskalniku, ki je trenutno nameščen v računalniku Mac.
  • Uporabniški agent: Če spremenite uporabniško sredstvo, spletni strežniki prepoznajo vaš brskalnik kot nekaj drugega kot Safari 9.
  • Povežite spletnega inšpektorja: Spletni inšpektor Safari 9 prikaže vsa spletna mesta s sredstvi, ki omogočajo pregledovanje informacij CSS, meritev in strukture DOM ter izvorne izvorne kode.
  • Prikaži konzolo za napake: Ena izmed najbolj razširjenih možnosti v meniju Razvoj, ta konzola prikaže napake in opozorila JavaScript, HTML in XML.
  • Prikaži vir strani: Omogoča ogled in iskanje izvorne kode aktivne spletne strani.
  • Prikaži vire strani: Če izberete to možnost, na trenutni strani prikažejo dokumente, skripte, CSS in druge vire.
  • Prikaži prikažnik urejevalnika: Omogoča urejanje in izvrševanje drobcev kode, v nasprotju s popolno stranjo. Ta funkcija je zelo uporabna z vidika testiranja.
  • Pokaži razširjevalnik: Omogoča vam izdelavo lastnih razširitev Safari, tako da ustrezno prilepite kodo in dodate metapodatke.
  • Začnite časovno snemanje: Zapiše številne elemente, vključno z zahtevami omrežja, izvajanjem JavaScripta, prikazovanjem strani in drugimi dogodki za uporabniško določeno obdobje, ki so vsi vidni znotraj inšpektorja WebKit.
  • Empty Caches: Če kliknete to možnost, izbrišete vse shranjene predpomnilnike v Safariju, ne samo standardne datoteke predpomnilnika spletnega mesta.
  • Onemogoči predpomnilnike: Če onemogočite predpomnjenje, se sredstva prenesejo s spletnega mesta vsakič, ko je zahtevana dostop, v nasprotju z uporabo lokalnega predpomnilnika.
  • Dovoli JavaScript iz polja za pametno iskanje: Zaradi varnostnih razlogov je privzeto onemogočen, ta funkcija omogoča vnos URL-jev, ki vsebujejo JavaScript v naslovni vrstici Safari.
  • S certifikati SHA-1 obravnavajte kot nezanesljive: Skrajšan za Algoritem Secure Hash, se je pokazala, da je funkcija SHA-1, hash, manj varna, kot je bilo prvotno mišljeno, zato je ta možnost dodana v Safari 9.