Paano I-activate at Gamitin ang Responsive Design Mode sa Safari 9

01 ng 06

Isaaktibo at Gamitin ang Nakikiramay na Mode ng Disenyo sa Safari 9

© Scott Orgera.

Ang pagiging isang nag-develop ng Web sa mundo ngayon ay nangangahulugan ng pagsuporta sa isang bevy ng mga device at mga platform, na kung minsan ay maaaring maging isang nakakatakot na gawain. Kahit na ang pinaka-mahusay na dinisenyo code adhering sa pinakabagong mga pamantayan sa Web, maaari mo pa ring makita na ang mga bahagi ng iyong website ay maaaring hindi tumingin o kumilos ang paraan na gusto mo ang mga ito sa ilang mga device o resolution. Kapag nahaharap sa hamon ng pagsuporta sa ganitong malawak na hanay ng mga sitwasyon, ang pagkakaroon ng tamang mga tool ng kunwa sa iyong pagtatapon ay maaaring maging napakahalaga.

Kung ikaw ay isa sa maraming mga programmers na gumagamit ng Mac, ang toolset ng developer ng Safari ay palaging madaling gamitin. Sa paglabas ng Safari 9 ang lawak ng pag-andar na ito ay malaki ang pinalawak, higit sa lahat dahil sa Responsive Design Mode_ na nagbibigay-daan sa iyo upang i-preview kung paano ang iyong site ay magre-render sa iba't ibang mga resolution ng screen pati na rin sa iba't ibang iPad, iPhone at iPod touch build.

Ang mga detalye ng tutorial kung paano i-activate ang tumutugon Disenyo Mode pati na rin kung paano gamitin ito para sa iyong mga pangangailangan sa pag-unlad.

Una, buksan ang iyong Safari browser.

02 ng 06

Mga Kagustuhan sa Safari

© Scott Orgera.

Mag-click sa Safari sa menu ng browser, na matatagpuan sa tuktok ng screen. Kapag lumitaw ang drop-down na menu, piliin ang opsiyon na Mga Kagustuhan_ circled sa halimbawa sa itaas.

Mangyaring tandaan na maaari mong magamit ang sumusunod na shortcut sa keyboard bilang kapalit ng nakalagay na menu item: COMMAND + COMMA (,)

03 ng 06

Ipakita ang Bumuo ng Menu

© Scott Orgera.

Ang dialog na Mga Pagpipilian sa Safari ay dapat na ngayong maipakita, overlaying ang iyong browser window. Una, mag-click sa Advanced na icon_ na kinakatawan ng isang gear at matatagpuan sa itaas na kanang sulok ng window.

Dapat na nakikita ang Mga Advanced na Kagustuhan ng browser. Sa ibaba ay isang opsiyon na sinamahan ng isang checkbox, na may label na Show Develop menu sa menu bar at circled sa halimbawa sa itaas. Mag-click sa checkbox nang isang beses upang buhayin ang menu na ito.

04 ng 06

Ilagay ang tumutugon Disenyo Mode

© Scott Orgera.

Ang isang bagong pagpipilian ay dapat na magagamit sa iyong menu ng Safari, na matatagpuan sa tuktok ng screen, na may label na Binuo . Mag-click sa pagpipiliang ito. Kapag lumilitaw ang drop-down na menu, piliin ang Enter Responsive Design Mode _ circled sa halimbawa sa itaas.

Pakitandaan na maaari mong magamit ang sumusunod na shortcut sa keyboard bilang kapalit ng item na nabanggit sa itaas: OPTION + COMMAND + R

05 ng 06

Nakikiramay Disenyo Mode

© Scott Orgera.

Ang aktibong pahina ng Web ay dapat na ipapakita sa Responsive Design Mode, tulad ng ipinapakita sa halimbawa sa itaas. Sa pamamagitan ng pagpili ng isa sa mga aparatong iOS na nakalista tulad ng iPhone 6, o isa sa mga itinalagang resolution ng screen na magagamit tulad ng 800 x 600, maaari mong agad na tingnan kung paano magre-render ang pahina sa device na iyon o sa resolution ng display na iyon.

Bilang karagdagan sa mga device at resolution na ipinapakita, maaari mo ring turuan ang Safari upang gayahin ang ibang ahente ng user - tulad ng isa mula sa ibang browser - sa pamamagitan ng pag-click sa drop-down na menu na ipinakita nang direkta sa itaas ng mga icon ng resolution.

06 ng 06

Paunlarin ang Menu: Iba pang Mga Pagpipilian

© Scott Orgera.

Bilang karagdagan sa Responsive Design Mode, ang menu ng Develop Safari 9 ay nag-aalok ng maraming iba pang kapaki-pakinabang na mga pagpipilian_ ilang na nakalista sa ibaba.

Mga Kaugnay na Pagbabasa

Kung nahanap mo ang tutorial na ito kapaki-pakinabang, siguraduhin na tingnan ang aming iba pang mga walkthroughs ng Safari 9.