Skip to main content

Kaip "Safari 9" aktyvuoti ir naudoti "Responsive Design Mode"

Anonim

Šiuolaikinio pasaulio žiniatinklio kūrėjas reiškia, kad reikia palaikyti įrenginių ir platformų skaičių, o kartais tai gali būti nelengvas uždavinys. Net ir gerai suplanuotu, kuris laikosi naujausių interneto standartų, kodą, vis tiek galite sužinoti, kad jūsų svetainės dalys gali atrodyti ar neveikti taip, kaip norite, tam tikruose įrenginiuose ar rezoliucijose. Susidūrę su tokio daugelio scenarijų palaikymo iššūkiu, tinkamas imitavimo įrankis gali būti neįkainojamas.

Jei esate vienas iš daugelio programuotojų, kurie naudoja "Mac", "Safari" kūrėjų įrankių rinkinys visada buvo naudingas. "Safari 9" išleidimo metu ši funkcija labai išsiplėtė, daugiausia dėl "Responsive Design Mode", kuri leidžia jums peržiūrėti, kaip jūsų svetainė bus rodoma esant skirtingoms ekrano rezoliucijoms, taip pat skirtinguose "iPad", "iPhone" ir "iPod touch" kūrimuose.

Šioje pamokoje pateikiama išsami informacija apie tai, kaip aktyvuoti "Responsive Design" režimą, taip pat kaip jį naudoti jūsų vystymosi poreikiams.

01 iš 05

"Safari" nuostatos

Pirmiausia atidarykite "Safari" naršyklę.

Spustelėkite Safari naršyklės meniu, esančiame ekrano viršuje. Kai pasirodys išskleidžiamasis meniu, pasirinkite Nustatymai parinktis apibraukta pavyzdyje.

Pastaba: Vietoj aukščiau minėto meniu elemento galite naudoti šią spartųjį klavišą: COMMAND + COMMA (,)

02 iš 05

Rodyti meniu "Sukurti"

"Safari" nuostatos dialogas turėtų būti rodomas, viršijantis naršyklės langą. Pirmiausia spustelėkite ant Išplėstinė piktogramą, pavaizduotą įrankiu ir esančią viršutiniame dešiniajame lango kampe.

Dabar naršyklės išplėstinės nuostatos turėtų būti matomos. Apatinėje dalyje yra parinktis, prie kurios pridėtas žymimasis laukelis, pažymėtas etikete Meniu juostoje spustelėkite "Parengti meniu" ir apibraukta aukščiau pateiktame pavyzdyje. Vieną kartą spustelėkite vieną langelį, kad suaktyvintumėte šį meniu.

03 iš 05

Įveskite reaguojančio dizaino režimą

Dabar "Safari" meniu, esančiame ekrano viršuje, turi būti nurodyta nauja parinktis Kurti. Spustelėkite šią parinktį.

Kai pasirodys išskleidžiamasis meniu, pasirinkite Įveskite reaguojančio dizaino režimąrodytas pavyzdyje.

Pastaba: Vietoj aukščiau minėto meniu elemento galite naudoti šią spartųjį klavišą:OPTION + COMMAND + R

04 iš 05

Atsakingas dizaino režimas

Aktyvus tinklalapis dabar turėtų būti rodomas "Responsive Design Mode", kaip parodyta aukščiau pateiktame pavyzdyje. Pasirinkę vieną iš "iOS" įrenginių, išvardytų, pvz., "IPhone 6", arba vieną iš nurodytų ekrano rezoliucijų, pvz., 800 x 600, galite nedelsdami peržiūrėti, kaip šis puslapis bus rodomas šiame įrenginyje arba ekrano skyrelyje.

Be rodomų įrenginių ir rezoliucijų, taip pat galite nurodyti "Safari" imituoti skirtingą naudotojo agentą, pvz., Vieną iš kitos naršyklės, spustelėję išskleidžiamąjį meniu, rodomą tiesiai virš skiriamųjų piktogramų.

05 iš 05

Sukurti meniu: Kitos parinktys

Be "Responsive Design Mode", Safari 9 "Develop" meniu siūlo daugybę kitų naudingų funkcijų, kurių kai kurie išvardyti toliau.

  • Atidaryti puslapį su: Leidžia atidaryti aktyvų tinklalapį bet kurioje kitoje naršyklėje, kuri šiuo metu įdiegta jūsų kompiuteryje.
  • Vartotojo atstovas: Naudotojo agento keitimas sukelia interneto serverius identifikuoti jūsų naršyklę kaip "Safari 9".
  • Prijunkite žiniatinklio inspektorių: "Safari 9" žiniatinklio inspektorius rodo visus tinklalapio išteklius, suteikiantį galimybę sužinoti CSS informaciją, DOM metriką ir struktūrą, taip pat jos gimtąjį šaltinio kodą.
  • Rodyti klaidos konsolę: Vienas iš dažniausiai naudojamų "Develop" meniu variantų šioje konsolėje rodo "JavaScript", HTML ir XML klaidas bei įspėjimus.
  • Rodyti puslapio šaltinį: Leidžia peržiūrėti ir ieškoti aktyviojo tinklalapio pradinio kodo.
  • Rodyti puslapio resursus: Pasirinkus šią parinktį bus rodomi dokumentai, scenarijai, CSS ir kiti ištekliai iš dabartinio puslapio.
  • Rodyti fragmento redaktorių: Suteikia galimybę redaguoti ir vykdyti fragmentus kodo, o ne viso puslapio. Ši funkcija yra labai naudinga išbandant.
  • Rodyti "Extension Builder": Galite kurti savo "Safari" plėtinius, atitinkamai pakuokite savo kodą ir pridėdami metaduomenis.
  • Įrašyti laiko juostą: Užregistruojama keletas elementų, įskaitant tinklo užklausas, "JavaScript" vykdymą, puslapių atvaizdavimą ir kitus įvykius vartotojo apibrėžtu laikotarpiu, kuriuos galima peržiūrėti "WebKit Inspector".
  • Tuščia talpyklos: Paspaudus šią parinktį, "Safari" ištrina visą saugomą talpyklą, o ne tik standartinius talpyklos failus internete.
  • Išjungti talpyklą: Kai atsisiuntimas išjungtas, ištekliai yra atsisiunčiami iš svetainės kiekvieną kartą, kai pateikiamas prieigos prašymas, o ne vietinės talpyklos naudojimas.
  • Leisti "JavaScript" iš "Smart Search" lauko: Saugumo sumetimais pagal numatytuosius nustatymus išjungta, ši funkcija leidžia į "Safari" adresų juostą įvesti URL adresus, kuriuose yra "JavaScript".
  • Traktuokite SHA-1 sertifikatus kaip nesaugius: Trumpai tariant "Secure Hash" algoritmas, SHA-1 hash funkcija buvo įrodyta, kad ji yra mažiau saugi, nei iš pradžių manoma, taigi papildoma šios galimybės "Safari 9".