Πώς να αποκτήσετε το μέγεθος της οθόνης σε pixel

Μπορεί να υπάρχουν στιγμές που η εφαρμογή JavaScript πρέπει να γνωρίζει τι χρειάζεται η οθόνη μεγέθους για να εκτελεί συγκεκριμένες ενέργειες.

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

Λάβετε το ψήφισμα του χρήστη

Ίσως θέλετε να κάνετε κάτι που περιλαμβάνει την ανάλυση της συσκευής του χρήστη. Σε αυτήν την περίπτωση, θα πρέπει να χρησιμοποιήσετε τις ενσωματωμένες screen.widthκαι screen.heightιδιότητες. Αυτά σας δίνουν το μέγεθος της οθόνης που αντιμετωπίζετε.

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

Λήψη μεγέθους προγράμματος περιήγησης

Μπορεί να υπάρχει μια ενδιαφέρουσα εφαρμογή για την αντιμετώπιση του τρέχοντος μεγέθους του προγράμματος περιήγησης. Εάν πρέπει να αποκτήσετε πρόσβαση σε αυτές τις διαστάσεις, χρησιμοποιήστε το screen.availWidthκαι τις screen.availHeightιδιότητες για να το κάνετε.

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

Μια ενδιαφέρουσα σημείωση :screen.availHeightμπορεί επίσης να χρησιμοποιηθεί για να καταλάβει πόσο ψηλά είναι μια γραμμή εργασιών σε έναν υπολογιστή. Εάν η ανάλυση του προγράμματος περιήγησής σας είναι ακριβής1366 x 768καιscreen.availHeightαναφέρει 728 pixel, τότε η γραμμή εργασιών σας έχει ύψος 40 pixel. Μπορείτε επίσης να υπολογίσετε το ύψος της γραμμής εργασιών αφαιρώνταςscreen.heightκαιscreen.availHeight:

var taskbarHeight = parseInt(screen.height,10) - parseInt(screen.availHeight,10) + " pixels"; /* For a user that has a screen resolution of 1366 x 768 pixels, their taskbar is likely 40 pixels if using Windows 10 with no added accessibility features. */

Λήψη μεγέθους παραθύρου προβολής

Αυτές οι ιδιότητες είναι ενδιαφέρουσες και μπορούν να χρησιμοποιηθούν για να δημιουργήσουν μερικά ωραία εφέ. Μπορείτε να χρησιμοποιήσετε window.innerHeightκαι window.innerWidthνα λάβετε το μέγεθος του παραθύρου για την ιστοσελίδα καθώς ο χρήστης το βλέπει.

Λάβετε υπόψη ότι αυτές οι τιμές δεν είναι στατικές και θα αλλάξουν ανάλογα με το τι συμβαίνει με το ίδιο το πρόγραμμα περιήγησης. Με άλλα λόγια, εάν το ίδιο το πρόγραμμα περιήγησης είναι μικρό, αυτές οι τιμές θα είναι μικρότερες και εάν το πρόγραμμα περιήγησης μεγιστοποιηθεί, θα είναι μεγαλύτερες.

Εάν, για παράδειγμα, εργάζεστε στο Google Chrome και ανοίξετε την κονσόλα (πρέπει να είναι αγκυρωμένη στο πλάι του παραθύρου), window.innerHeightθα αλλάξει ώστε να αντικατοπτρίζει το ύψος της κονσόλας, επειδή μέρος του παραθύρου θα αποκλειστεί.

Μπορείτε να το δοκιμάσετε κάνοντας κλήση window.innerHeight, σημειώνοντας την τιμή και, στη συνέχεια, αυξάνοντας το μέγεθος της κονσόλας και, στη συνέχεια, καλέστε window.innerHeightξανά.

Αυτές οι ιδιότητες θα αλλάξουν επίσης εάν το πρόγραμμα περιήγησής σας μεγιστοποιηθεί ή αλλάξει μέγεθος με οποιονδήποτε τρόπο. Στο μέγιστο μέγεθος ενός προγράμματος περιήγησης, η ιδιότητα window.innerWidthείναι η ίδια και με τα δύο screen.widthκαι screen.availWidth(εκτός εάν υπάρχει μια γραμμή εργασιών στο πλάι, στην οποία περίπτωση screen.availWidthδεν θα είναι ίδια). window.innerHeightισούται με το μέγεθος της περιοχής στο ίδιο το παράθυρο της σελίδας (η περιοχή της ιστοσελίδας).

Λάβετε ύψος και πλάτος της ιστοσελίδας

Εάν πρέπει να δείτε πόσο ψηλός ή πλάτος είναι πραγματικά η ιστοσελίδα σας, υπάρχουν ιδιότητες για να τραβήξετε αυτές τις διαστάσεις: document.body.offsetWidthκαι document.body.offsetHeight.

Αυτές οι ιδιότητες αντιπροσωπεύουν το μέγεθος του περιεχομένου στο κύριο μέρος της ίδιας της σελίδας. Μια σελίδα χωρίς περιεχόμενο έχει document.body.offsetHeightσχεδόν την ίδια τιμή όπως window.innerHeightεξαρτάται από τα περιθώρια / παραγέμισμα που έχουν οριστεί στο σώμα του εγγράφου. Εάν τα περιθώρια και τα padding έχουν ρυθμιστεί στο 0ριζικό στοιχείο html και στο σώμα του εγγράφου, τότε document.body.offsetHeightκαι window.innerHeightθα είναι ίσο χωρίς περιεχόμενο.

Αυτές οι ιδιότητες μπορούν να χρησιμοποιηθούν για να αλληλεπιδράσουν με τη σελίδα / εφαρμογή σας ανάλογα με το τι θέλετε να κάνετε.