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

01 iš 06

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

© Scott Orgera.

Šiuolaikinio pasaulio žiniatinklio kūrėjas reiškia, kad reikia palaikyti įtaisus ir platformas, o tai kartais gali būti nelengva užduotis. Net turint geriausiai suplanuotą kodą, kuris atitinka naujausius interneto standartus, 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 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" įrenginiuose.

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

Pirmiausia atidarykite "Safari" naršyklę.

02 iš 06

"Safari" nuostatos

© Scott Orgera.

Spustelėkite " Safari " naršyklės meniu, esantį ekrano viršuje. Kai pasirodys išskleidžiamasis meniu, aukščiau esančiame pavyzdyje pasirinkite parinktį " Parinktys" .

Atkreipkite dėmesį, kad vietoj anksčiau minėto meniu elemento galite naudoti šią spartųjį klavišą: COMMAND + COMMA (,)

03 iš 06

Rodyti meniu "Sukurti"

© Scott Orgera.

"Safari" nuostatos dialogas turėtų būti rodomas, viršijantis naršyklės langą. Pirmiausia spustelėkite " Išplėstinė", atstovaujamą įrankiu, esančiame 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, vadinamas meniu juostoje "Rodyti meniu kūrimą" ir apibūdintas aukščiau pateiktame pavyzdyje. Vieną kartą spustelėkite vieną langelį, kad suaktyvintumėte šį meniu.

04 iš 06

Įveskite reaguojančio dizaino režimą

© Scott Orgera.

Dabar jūsų "Safari" meniu, esančiame ekrano viršuje, pažymėtame " Išplėsti", turėtų būti nauja parinktis. Spustelėkite šią parinktį. Kai pasirodys išskleidžiamasis meniu, pirmiau pateiktame pavyzdyje pasirinkite " Enter Responsive Design Mode _".

Atminkite, kad vietoje pirmiau minėto meniu elemento galite naudoti šią spartųjį klavišą: OPTION + COMMAND + R

05 iš 06

Atsakingas dizaino režimas

© Scott Orgera.

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ų.

06 iš 06

Sukurti meniu: Kitos parinktys

© Scott Orgera.

Be "Responsive Design" režimo, Safari 9 "Develop" meniu siūlo daugybę kitų naudingų variantų, kurie yra išvardyti toliau.

Susiję skaitymai

Jei radote šitą pamoką naudinga, būtinai perskaitykite kitus mūsų "Safari 9" žingsnius.