Koja je veličina mojeg viewporta?

Prozor Vašeg preglednika (viewport)

Prepoznavanje…

Povezani alati

Što je viewport?

U rezultatu je prikazana veličina Vašeg viewporta: širina i visina područja unutar prozora preglednika u kojem se prikazuju web stranice. Promijenite li veličinu prozora ili povećate prikaz, vrijednost se odmah ažurira.

Što je viewport

Viewport je vidljivi dio web stranice. Ne uključuje sučelje preglednika, poput kartica, adresne trake i oznaka, ni ono izvan preglednika, poput programske trake ili Docka. Uvijek je jednak zaslonu ili manji od njega.

Zašto je viewport važan web stranicama

Responzivne web stranice mijenjaju izgled ovisno o širini viewporta, s pomoću CSS prijelomnih točaka (breakpoints). Mnoge stranice mijenjaju izgled otprilike pri ovim širinama:

  • ispod 640 piksela: izgled za mobitel, jedan stupac, izbornik iza gumba
  • 768 piksela: izgled za tablet
  • 1024 piksela: izgled za manja prijenosna računala
  • 1280 piksela i više: puni izgled za stolna računala

Zato ista stranica može izgledati drukčije u uskom prozoru na velikom zaslonu.

Viewport na mobitelima

Mobiteli viewport prijavljuju u CSS pikselima, a ne u fizičkim pikselima. Mobitel sa zaslonom širokim 1170 piksela i omjerom piksela uređaja 3 ima viewport od 390 piksela. Mobilne stranice tu širinu preuzimaju postavkom width=device-width. Bez nje mobiteli prikazuju stranicu kao da je široka oko 980 piksela i smanjuju je.

Testiranje drugih veličina viewporta

Alati za razvojne programere u preglednicima mogu simulirati bilo koji viewport. U Chromeu, Edgeu i Firefoxu pritisnite F12 (Cmd + Option + I na Macu) i uključite alatnu traku uređaja ili način responzivnog dizajna da biste isprobali izgled za mobitele i tablete bez mijenjanja prozora.

Često postavljana pitanja

Koja je razlika između veličine zaslona i veličine viewporta?

Veličina zaslona odnosi se na cijeli zaslon. Viewport je područje unutar prozora preglednika u kojem se prikazuju stranice, pa je manji kad prozor nije maksimiziran ili kad alatne trake zauzimaju prostor.

Zašto se viewport mijenja kad povećam prikaz?

Povećanjem prikaza svaki CSS piksel postaje veći, pa ih u prozor stane manje. Uz povećanje od 200 % prozor širok 1400 piksela ima viewport od 700 piksela, zato povećane stranice često prelaze na mobilni izgled.

Uključuje li viewport traku za pomicanje?

Ovdje prikazana veličina uključuje okomitu traku za pomicanje, ako je Vaš sustav prikazuje. Prostor dostupan sadržaju stranice nekoliko je piksela uži.