work­ing with De­vice Mode

An old adage states that mo­bile con­tent should be tested on a real de­vice. Re­cent de­vel­op­ments make desk­top em­u­la­tors look more ap­peal­ing...

Web Designer - - Design Develop Create -

While com­plete em­u­la­tion of mo­bile de­vices on Chrome is im­pos­si­ble, the prod­uct does make your life eas­ier. First of all, click the lit­tle smart­phone pic­togram shown in the top-left cor­ner of the De­vel­oper Tools screen. Chrome will adapt the view in a fash­ion sim­i­lar to the one shown in the fig­ure. The combo boxes at the top of the screen en­able you to pick var­i­ous com­monly used de­vices rang­ing from the old Sam­sung Gal­axy S5 to more re­cent prod­ucts such as the iphone X. Bear in mind that this fea­ture does not switch the ac­tual ren­der­ing en­gine. The browser does its magic purely by ad­just­ing view­port co­or­di­nates. This lim­i­ta­tion also ap­plies to screen ro­ta­tion, which you en­able via the Ro­tate pic­togram in the tool­bar. Mo­bile apps usu­ally use sen­sor data. Chrome can em­u­late th­ese — open the De­vel­oper Tools ham­burger menu. Next, se­lect More Tools > Sen­sors. The Con­sole win­dow takes up an ad­di­tional pane with sen­sor set­tings. They pro­vide ac­cess to ge­olo­ca­tion, ac­celerom­e­ter and ad­vanced touch in­put. For com­plete­ness sake, let us re­it­er­ate that desk­top tests can’t re­place ‘ac­cep­tance runs’ on a hand­set. Mo­bile ap­pli­ca­tions live and die by their hap­tics, which are com­pletely dif­fer­ent from those found on a PC. As of this writ­ing, Google has not ‘uni­fied’ the var­i­ous as­pects of de­vice mode. The var­i­ous func­tions, which are de­scribed in de­tail at de­vel­op­ers.google.com/web/tools/chromede­v­tools/de­vice-mode/, might get a new user in­ter­face in the fu­ture — stay tuned for small changes in this re­gard.

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.