Anonim

Mobilieji įrenginiai jau sudaro didžiulę, jei ne didžiąją dalį, daugelio svetainių skaitytojų, todėl įsitikinkite, kad jūsų svetainė atrodys ir tinkamai funkcionuos „iPhone“ ar planšetiniame kompiuteryje. Yra daugybė paslaugų, siūlančių tam tikro URL mobiliųjų įrenginių peržiūras, tačiau „Apple“ žymiai palengvino svetainių mobilumo parengties testavimą naudodama „Safari 9“ operacinėje sistemoje „OS X El Capitan“. Nauja funkcija, vadinama „ Responsive Design Mode“, gali greitai peržiūrėti, kaip svetainė atrodo įvairiuose „Apple“ įrenginiuose, taip pat įprastas mobiliojo ekrano skiriamąją gebą. Štai kaip tai veikia.
Svarbu pakartoti, kad reaktyvusis projektavimo režimas yra nauja funkcija, išskirtinė „Safari 9“ operacinėje sistemoje „OS X El Capitan“, todėl norėdami ją pasiekti turėsite naudoti bent šias naršyklės ir operacinės sistemos versijas. Jei jūsų „Mac“ atitinka šį reikalavimą, pirmiausia turėsite įjungti „Safari“ kūrėjo režimą. Norėdami tai padaryti, paleiskite „Safari“ ir meniu juostoje spustelėkite „ Safari “. Tada pasirinkite Preferences> Advanced .


„Safari“ parinkčių lango skirtuke „Išplėstinis“ pažymėkite langelį „Parodyti meniu meniu meniu juostoje“. Kaip rodo parinkties pavadinimas, „Safari“ meniu juostoje, dešinėje pusėje, pamatysite naują meniu „Kurti“. „Žymos“.
Tada uždarykite „Safari Preferences“ langą ir eikite į svetainę, kurią norėtumėte išbandyti reaktyvaus projektavimo režimu. Kai svetainė bus visiškai įkelta į jūsų naršyklę, naudokite spartųjį klavišą „ Command-Option-R“ ir pamatysite naršyklės langą paversdami vienos iš kelių mobiliųjų įrenginių skiriamąją gebą peržiūra (taip pat galite patekti į reaguojančio projektavimo režimą spustelėdami Kurti meniu juostoje „Safari“ ir pasirinkę „ Enter Responsive Design Mode“ ).

„Safari Responsive Design Mode“ leidžia peržiūrėti, kaip svetainė atrodo visomis „Apple“ mobiliųjų įrenginių skiriamąja geba, pradedant nuo 3, 5 colio „iPhone 4S“ ir baigiant 12, 9 colio „iPad Pro“. Vartotojai taip pat turi galimybę pasirinkti 1x, 2x arba 3x „Retina“ skiriamąją gebą ir pakeisti naršyklės agentą, kad jis imituotų populiariausių naršyklių, tokių kaip „Chrome“, „Firefox“ ir „Edge“, elgseną.

Kiekvieno įrenginio ir ekrano dydžio vartotojai gali spustelėti įrenginio piktogramą, kad pakeistumėte vertikalią arba horizontalią orientaciją, arba įrenginiuose, tokiuose kaip „iPad Air“ ir „iPad Pro“, kurie palaiko padalijamąjį vaizdą, galite spustelėti, kad pasuktumėte skirtingus padalintų vaizdų išdėstymus.

Nors jautriam „Safari“ projektavimo režimui trūksta kai kurių panašių jau egzistuojančių įrankių parinkčių, jo įdėjimas tiesiai į „Safari“ gali padėti sutaupyti laiko interneto dizaineriams ir puikus mokymasis ir testavimo įrankis svetainių savininkams, norintiems įsitikinti, kad jų lankytojai mobiliesiems gausite geriausią patirtį, neatsižvelgiant į ekrano skiriamąją gebą ar dydį.
Baigę bandymą, galite išeiti iš reaktyvaus projektavimo režimo, uždarant naršyklės langą ar skirtuką arba dar kartą paspausdami spartųjį klavišą „ Command-Option-R“ .

Išbandykite savo svetainės mobilųjį išdėstymą naudodami safari reaguojančio projektavimo režimą