tigtools

Ποια είναι η ανάλυση οθόνης μου

Το μέγεθος οθόνης, το μέγεθος παραθύρου του προγράμματος περιήγησης και οι λεπτομέρειες οθόνης διαβάζονται απευθείας από το πρόγραμμα περιήγησής σας. Το μέγεθος viewport ενημερώνεται καθώς αλλάζετε το μέγεθος του παραθύρου.

Εκτελείται στον περιηγητή σας Χωρίς εγγραφή

Ανάγνωση στοιχείων οθόνης…

Πώς να το χρησιμοποιήσετε

  1. Ανοίξτε τη σελίδα. Οι τιμές διαβάζονται αμέσως από το πρόγραμμα περιήγησής σας.
  2. Αλλάξτε το μέγεθος του παραθύρου ή περιστρέψτε τη συσκευή σας για να δείτε να ενημερώνεται το μέγεθος viewport και ο προσανατολισμός.
  3. Χρησιμοποιήστε το «Αντιγραφή όλων» για να επικολλήσετε τις λεπτομέρειες σε μια αναφορά σφάλματος ή ένα αίτημα υποστήριξης.

Πώς λειτουργεί

Τα προγράμματα περιήγησης αναφέρουν μεγέθη σε CSS pixels, τη μονάδα που χρησιμοποιούν οι ιστοσελίδες για τη διάταξη. Σε οθόνες υψηλής πυκνότητας ένα CSS pixel αποδίδεται με πολλά φυσικά pixel: ο λόγος pixel συσκευής (DPR) δείχνει πόσα. Ένα τηλέφωνο που αναφέρει 390 × 844 με DPR 3 έχει μια οθόνη περίπου 1170 × 2532 φυσικών pixel. Σε υπολογιστή, η μεγέθυνση του προγράμματος περιήγησης και η κλιμάκωση οθόνης του λειτουργικού συστήματος αλλάζουν και το DPR και το μέγεθος CSS, επομένως μια οθόνη 2560 × 1440 σε κλιμάκωση 125 % αναφέρει 2048 × 1152.

Η ανάλυση οθόνης αφορά ολόκληρη την οθόνη· ο διαθέσιμος χώρος εξαιρεί τις μόνιμες γραμμές του λειτουργικού συστήματος, όπως τη γραμμή εργασιών των Windows ή τη γραμμή μενού του macOS· η περιοχή προβολής (viewport) είναι το τμήμα του παραθύρου του προγράμματος περιήγησης όπου εμφανίζεται η σελίδα, χωρίς τις γραμμές εργαλείων αλλά συμπεριλαμβάνοντας τυχόν γραμμή κύλισης. Το viewport είναι το στοιχείο στο οποίο ανταποκρίνονται τα media queries CSS όπως min-width: 768px, επομένως είναι ο αριθμός που πρέπει να ελέγχετε κατά τη δοκιμή responsive διατάξεων.

Οι τιμές χρωματικού συνδυασμού και μειωμένης κίνησης προέρχονται από τα ίδια media features CSS που χρησιμοποιούν οι ιστότοποι για να προσαρμοστούν στις ρυθμίσεις του συστήματός σας. Οι τιμές επωνυμίας, πλατφόρμας και κινητής συσκευής προέρχονται από User-Agent Client Hints, τα οποία παρέχουν μόνο προγράμματα περιήγησης που βασίζονται σε Chromium. Ορισμένα προγράμματα περιήγησης στρογγυλεύουν ή διορθώνουν σκόπιμα αυτές τις τιμές για να μειώσουν το fingerprinting, επομένως ενδέχεται να μην αντιστοιχούν ακριβώς στο υλικό σας.

Παραδείγματα

Δοκιμή μιας responsive διάταξης

Μια διάταξη χαλάει στο φορητό υπολογιστή ενός συναδέλφου. Αντιγράφει τις λεπτομέρειες, οι οποίες δείχνουν ένα viewport 1280 × 649 με DPR 1.5. Ρυθμίστε τη γραμμή εργαλείων συσκευής του προγράμματος περιήγησής σας στο ίδιο viewport για να αναπαράγετε το πρόβλημα.

Επιλογή μεγεθών εικόνας

Μια εικόνα προϊόντος εμφανίζεται με πλάτος 400 CSS pixels. Σε ένα τηλέφωνο με DPR 3 χρειάζεται 1200 pixels για να φαίνεται ευκρινής, κάτι που σας δείχνει ποια μεγέθη να συμπεριλάβετε στο srcset.

Έλεγχος κλιμάκωσης οθόνης

Μια οθόνη 3840 × 2160 αναφέρει 2560 × 1440 με DPR 1.5: τα Windows κλιμακώνουν την οθόνη κατά 150 %.

Συχνές ερωτήσεις

Γιατί η ανάλυση οθόνης διαφέρει από τις προδιαγραφές της οθόνης μου;

Τα προγράμματα περιήγησης αναφέρουν εικονοστοιχεία CSS, τα οποία είναι τα φυσικά εικονοστοιχεία διαιρεμένα με τον συντελεστή κλίμακας. Πολλαπλασιάστε με την αναλογία εικονοστοιχείων συσκευής (device pixel ratio) για να πλησιάσετε την ανάλυση υλικού. Η μεγέθυνση του προγράμματος περιήγησης αλλάζει επίσης την αναφερόμενη τιμή.

Ποια είναι η διαφορά μεταξύ μεγέθους οθόνης και μεγέθους viewport;

Το μέγεθος οθόνης είναι ολόκληρη η οθόνη. Το viewport είναι μόνο η περιοχή μέσα στο παράθυρο του προγράμματος περιήγησης όπου σχεδιάζεται η σελίδα, επομένως είναι μικρότερο και αλλάζει όταν αλλάζετε το μέγεθος του παραθύρου ή ανοίγετε εργαλεία προγραμματιστή.

Χρησιμοποιούνται αυτές οι πληροφορίες για την παρακολούθησή μου;

Όχι από αυτήν τη σελίδα: οι τιμές εμφανίζονται μόνο σε εσάς και δεν αποθηκεύονται ούτε αποστέλλονται πουθενά. Οι ιστότοποι μπορούν να διαβάσουν τις ίδιες τιμές, γι' αυτό ορισμένα προγράμματα περιήγησης τις στρογγυλεύουν για να δυσκολέψουν τη δημιουργία δακτυλικού αποτυπώματος.

Γιατί εμφανίζεται υποστήριξη αφής στον φορητό υπολογιστή μου;

Η υποστήριξη αφής βασίζεται στον αριθμό των σημείων αφής που αναφέρει το πρόγραμμα περιήγησης. Οι φορητοί υπολογιστές με οθόνη αφής τα αναφέρουν ακόμη κι αν χρησιμοποιείτε κυρίως ποντίκι, και ορισμένα προγράμματα οδήγησης ή ρυθμίσεις απομακρυσμένης επιφάνειας εργασίας αναφέρουν υποστήριξη αφής χωρίς οθόνη αφής.

Απόρρητο

Όλες οι τιμές διαβάζονται από JavaScript στο πρόγραμμα περιήγησής σας και εμφανίζονται μόνο σε εσάς. Τίποτα δεν αποθηκεύεται, δεν μεταφορτώνεται ούτε περιλαμβάνεται στα αναλυτικά στοιχεία· καταγράφεται μόνο ένα ανώνυμο συμβάν ότι το εργαλείο άνοιξε και χρησιμοποιήθηκε.