Testējiet adaptīvo dizainu, izmantojot Chrome attīstītāja rīkus

Reaģējošs tīmekļa dizains ir būtisks, jo arvien vairāk lietotāju piekļūst internetam ar mobilo ierīču palīdzību. Lai nodrošinātu, ka tava vietne tiek pareizi attēlota dažādos ekrāna izmēros un izšķirtspējās, Chrome Developer Tools piedāvā spēcīgu iespēju pārbaudīt reaģējošo dizainu. Šajā norādē es parādīšu tev, kā aktivizēt mobilo skatu un simulēt dažādas ierīču izmērus, lai pārbaudītu tavas vietnes pielāgojamību.

Svarīgākie secinājumi

• Tu vari aktivizēt mobilo skatu ar DevTools, lai pārbaudītu savas lapas izkārtojumu dažādās ierīcēs.
• Ir noderīgi izvēlēties konkrētas ierīces ar to standarta izšķirtspējām un ekrāna attiecību.
• Funkcijas kā skārienjutības simulācija un uzspiešana, lai tuvinātu, ir arī noderīgas, lai emulētu mobilo ierīču lietotāju pieredzi.

Solis pa solim norādījumi

Lai izmantotu Chrome Developer Tools mobilo skatu, sekot šiem vienkāršiem soļiem:

1. Mobila skata aktivizēšana

Lai aktivizētu mobilo skatu, atver Chrome Developer Tools. To vari izdarīt vai nu caur izvēlni, vai arī izmantojot kombināciju taustiņu. Nospied "Toggle Device Toolbar" pogu vai izmanto īsinājumtaustiņus Command + Shift + M (macOS) jeb Control + Shift + M (Windows).

2. Ierīces izmēra izvēle un pielāgošana

DevTools augšējā joslā ir nolaižamais izvēlnes punkts, kurā vari izvēlēties displeja dimensijas. Pēc noklusējuma opcija ir "Responsive". Tu vari mainīt šo iestatījumu, lai izvēlētos izšķirtspēju un izmēru manuāli. Ja meklē konkrētu ierīces izmēru, klikšķini uz saraksta un izvēlies, piemēram, iPhone 12 Pro vai Pixel 7 no saraksta.

Tagad DevTools rāda izvēlētās ierīces izšķirtspēju. Ņem vērā, ka efektīvā izšķirtspēja, kuru pārlūks izmanto, var atšķirties no ierīces dabiskās izšķirtspējas.

3. Ierīces pikseļu attiecības izpratne

Testēšanas svarīgs aspekts ir "Device Pixel Ratio". Tu vari mainīt ierīces pikseļu attiecību, atverot trīsstūri punktu izvēlni un mainot atbilstošos vērtības. Device Pixel Ratio apraksta fiziskā pikseļu attiecību pret pikseļu skaitu, ko pārlūks izmanto.

Piemēram, iPhone 12 Pro gadījumā attiecība ir 3:1. Tas nozīmē, ka trīs fiziskie pikseļi vienā mērvienībā pārlūka attēlā. Dabiskā izšķirtspēja ir daudz augstāka, lai nodrošinātu, ka attēli un teksti izskatās skaidri un asoti.

4. Izkārtojuma un skata pielāgošana

5. Skārienjutības simulācija

Vel viens izcilais īpašums ir iespēja simulēt skārienžestus. Aktivizējot peli, tā tiek aizstāta ar pirkstu lietojumu. Tas ļauj tev emulēt, kā lietotāji mobīlajā tīmekļa vietnē mijiedarbojas, ritina vai navigē caur izvēlnēm.

Lai veiktu "Pinch-to-Zoom" žestu, turē Shift taustiņu nospiestu un ar peli vilc to. Tas emulēs žestu, ko lietotāji izmantotu reālā ierīcē.

6. Lapas ielādes ātruma pārbaude

Lai pārbaudītu vietnes ielādes ātrumu, vari izmantot apgrūtinājuma funkciju. Šī funkcija ļauj mainīt datu sakaru ātrumu, lai simulētu, kā tava vietne darbojas nepietiekamu tīkla apstākļu gadījumā.

Maini apgrūtinājuma iestatījumus uz "Low-End Mobile" vai "No Throttling", lai salīdzinātu efektus. Tu pamanīsi, ka vietne ielādējas atšķirīgi ātri, kas palīdzēs pārbaudīt lietotāju pieredzi lēnās savienojumos.

7. Screenshot izveide

Ja nepieciešams attēlot mobilo skatu, vari vienkārši izveidot ekrānuzņēmumu tieši no DevTools. Noklikšķini uz attiecīgās opcijas rīkjoslā, lai lejupielādētu ekrānuzņēmumu automātiski.

8. Atiestatīt uz noklusējuma vērtībām

Ja vēlies atiestatīt mobilo skata iestatījumus, to vari izdarīt arī DevTools. Noklikšķini uz pogas, lai atjaunotu visus modificējumus uz noklusējuma vērtībām.

Tādējādi ātri vari veikt jaunu testu ar noklusējuma ierīces iestatījumiem.

Kopsavilkums

Šajā ceļvedī esi iemācījies, kā aktivizēt un konfigurēt Chrome Developer Tools mobilo skatu. Tu vari simulēt dažādas ierīces, pielāgot ierīces pikseļu attiecību, izmēģināt taustes žestus un pārbaudīt savas vietnes ielādes ātrumu. Šo funkciju pareiza izpratne un lietošana palīdzēs tev efektīvi optimizēt savas vietnes responsīvo dizainu.