01 od 06
Aktivirajte in uporabite način odzivnega oblikovanja v programu Safari 9
Biti spletni razvijalec v današnjem svetu pomeni podpiranje bevija naprav in platform, ki se včasih lahko izkaže za težavno nalogo. 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 orodje za razvijalce Safari vedno prišlo v priročno. S sproščanjem Safari 9 se je obseg te funkcionalnosti precej povečal, 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.
Najprej odprite brskalnik Safari.
02 od 06
Nastavitve Safari
Kliknite Safari v meniju brskalnika, ki se nahaja na vrhu zaslona. Ko se prikaže spustni meni, v zgornjem primeru zaokrožite možnost Preferences options_.
Upoštevajte, da lahko namesto zgornjega elementa menija uporabite naslednjo bližnjico na tipkovnici: COMMAND + COMMA (,)
03 od 06
Pokaži razvojni meni
Sedaj bi bilo treba prikazati pogovorno okno Safari's Preferences, prekrivanje okna brskalnika. Najprej kliknite na ikono Advanced_, 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 z meniju Prikaži razvoj v menijski vrstici in zaokroženo v zgornjem primeru. Za potrditev tega menija kliknite enkrat.
04 od 06
Vstopite v način odzivnega oblikovanja
Nova izbira mora biti zdaj na voljo v meniju Safari, ki je na vrhu zaslona, označena z Razvrščanjem . Kliknite to možnost. Ko se prikaže spustni meni, izberite Enter Responsive Design Mode _ obkroženi v zgornjem primeru.
Prosimo, upoštevajte, da lahko uporabite naslednjo bližnjico na tipkovnici namesto zgoraj omenjenega elementa menija: OPTION + COMMAND + R
05 od 06
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.
06 od 06
Razviti meni: druge možnosti
Poleg načina odzivnega oblikovanja v meniju Razvoj Safari 9 ponuja še veliko drugih uporabnih možnosti - nekatere, ki so navedene spodaj.
- Odpri stran z: Omogoča, da odprete aktivno spletno stran v katerem koli drugem brskalniku, ki je trenutno nameščen na vašem računalniku Mac.
- Uporabniški zastopnik: s spreminjanjem uporabniškega posrednika spletnimi strežniki prepoznajo svoj brskalnik kot nekaj drugega kot Safari 9.
- Povezava spletnega inšpektorja: Spletni inšpektor Safari 9 prikaže vse vire spletne strani, ki omogočajo pregledovanje informacij CSS, meritev in strukture DOM ter izvorne izvorne kode.
- Prikaži konzolo za napake: ena od 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.
- Show Snippet Editor: Omogoča urejanje in izvrševanje drobcev kode, v nasprotju s celotno stranjo. Ta funkcija je zelo uporabna z vidika testiranja.
- Prikaži podaljšek Builder: omogoča gradnjo lastnih razširitev Safari, tako da ustrezno prilepite svojo kodo in dodate metapodatke.
- Začni snemanje časovne vrste: beleži več postavk, vključno z zahtevami omrežja, izvajanjem JavaScripta, prikazovanjem strani in drugimi dogodki za uporabniško določeno obdobje, vse vidne znotraj inšpektorja WebKit.
- Prazni predpomnilniki: s klikom na to možnost izbrišete vse shranjene predpomnilnike v Safariju, ne samo standardne datoteke predpomnilnika spletnega mesta.
- Onemogoči predpomnilnike: pri onemogočanju predpomnjenja se viri prenesejo s spletnega mesta vsakič, ko je zahtevana dostop, in ne z uporabo lokalnega predpomnilnika.
- Dovoli JavaScript iz polja za pametno iskanje: privzeto je onemogočeno zaradi varnostnih razlogov, s to funkcijo lahko vnesete URL-je, ki vsebujejo javascript: v naslovni vrstici Safari.
- Šeste certifikate SHA-1 obravnava kot negotove: kratko za varen hash algoritem, SHA-1 hash funkcija je bila dokazano manj varna, kot je bila prvotno premišljena, zato je ta možnost dodana v Safari 9.
Povezano branje
Če ste našli to vadnico uporabno, se prepričajte, da si ogledate naše druge korake za Safari 9.
- Kako upravljati obveščanja na spletnem mestu
- Kako izvoziti spletno stran v datoteko PDF
- Kako konfigurirati razširitve programa Safari 9 za samodejno posodabljanje
- Kako uporabljati funkcijo pripetih spletnih mest