Ανιχνευτής Μεγέθους Οθόνης

Αναφορά

Viewport vs ανάλυση οθόνης — ποια είναι η διαφορά;

Το viewport είναι η ορατή περιοχή μιας ιστοσελίδας μέσα στο παράθυρο του browser, μετρημένη σε CSS pixels (window.innerWidth × window.innerHeight). Αλλάζει όταν αλλάζετε μέγεθος browser ή ανοίγετε DevTools. Η ανάλυση οθόνης είναι ο συνολικός αριθμός pixels της φυσικής οθόνης σας (screen.width × screen.height) — αυτό καθορίζεται από το hardware και τις ρυθμίσεις οθόνης. Για responsive web design, το viewport είναι αυτό που μετρά — καθορίζει ποια CSS media queries και breakpoints ενεργοποιούνται.

Τι είναι το Device Pixel Ratio (DPR);

Το Device Pixel Ratio (DPR) σας λέει πόσα φυσικά (hardware) pixels αντιστοιχούν σε ένα CSS pixel. DPR 1 σημαίνει αντιστοιχία 1:1 (τυπικές οθόνες). DPR 2 σημαίνει οθόνη Retina/HiDPI — κάθε CSS pixel αποδίδεται με 4 φυσικά pixels (2×2), παράγοντας πιο ευκρινές κείμενο και εικόνες. DPR 3 είναι κοινό σε smartphones υψηλής ποιότητας. Αυτό μετρά για: εξυπηρέτηση εικόνων @2x/@3x σε οθόνες υψηλού DPR, κατανόηση γιατί τα screenshots σε Retina οθόνες είναι διπλάσια της αναμενόμενης ανάλυσης, και debugging προβλημάτων layout σε συγκεκριμένες τιμές DPR.

Περιπτώσεις χρήσης ανίχνευσης οθόνης

Δοκιμή responsive design — επαληθεύστε ότι τα CSS breakpoints ενεργοποιούνται στα σωστά πλάτη viewport χωρίς να ανοίξετε DevTools. Αναφορές σφαλμάτων — μοιραστείτε ακριβείς διαστάσεις viewport, ανάλυση οθόνης και DPR κατά την αναφορά προβλημάτων εμφάνισης σε developers. Σχεδιασμός screenshots — γνωρίστε ακριβείς διαστάσεις πριν τραβήξετε screenshots για τεκμηρίωση ή app store listings. Μέγεθος διαφημίσεων & banners — επαληθεύστε ότι οι διαστάσεις viewport ταιριάζουν με τα απαιτούμενα μεγέθη ad slots.

Απόρρητο

Οι διαστάσεις οθόνης διαβάζονται τοπικά από τα browser APIs σας. Δεν αποστέλλονται δεδομένα σε κανέναν server.