Οθόνη παραθύρου JavaScript

Πίνακας περιεχομένων

Εμφάνιση πίνακα περιεχομένων

Το αντικείμενο window.screen περιέχει πληροφορίες σχετικά με την οθόνη του χρήστη.

Οθόνη παραθύρου

Το αντικείμενο window.screen μπορεί να γραφτεί χωρίς το πρόθεμα παραθύρου.

Ιδιότητες:

screen.width
screen.height
screen.availWidth
screen.availHeight
screen.colorDepth
screen.pixelDepth

Πλάτος οθόνης παραθύρου

Η ιδιότητα screen.width επιστρέφει το πλάτος της οθόνης του επισκέπτη σε εικονοστοιχεία.

Παράδειγμα

Εμφάνιση του πλάτους της οθόνης σε pixel:

document.getElementById("demo").innerHTML =
"Screen Width: " + screen.width;

Το αποτέλεσμα θα είναι:

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen width is " + screen.width;
</script>

</body>
</html>

Ύψος οθόνης παραθύρου

Η ιδιότητα screen.height επιστρέφει το ύψος της οθόνης του επισκέπτη σε pixel.

Παράδειγμα

Εμφάνιση του ύψους της οθόνης σε pixel:

document.getElementById("demo").innerHTML =
"Screen Height: " + screen.height;

Το αποτέλεσμα θα είναι:

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen height is " + screen.height;
</script>

</body>
</html>

Διαθέσιμο πλάτος οθόνης παραθύρου

Η ιδιότητα screen.availWidth επιστρέφει το πλάτος της οθόνης του επισκέπτη, σε pixels, μείον λειτουργίες διεπαφής όπως η γραμμή εργασιών των Windows.

Παράδειγμα

Εμφανίστε το διαθέσιμο πλάτος της οθόνης σε pixel:

document.getElementById("demo").innerHTML =
"Available Screen Width: " + screen.availWidth;

Το αποτέλεσμα θα είναι:

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Available screen width is " + screen.availWidth;
</script>

</body>
</html>

Διαθέσιμο ύψος οθόνης παραθύρου

Η ιδιότητα screen.availHeight επιστρέφει το ύψος της οθόνης του επισκέπτη, σε pixel, μείον λειτουργίες διεπαφής όπως η γραμμή εργασιών των Windows.

Παράδειγμα

Εμφανίστε το διαθέσιμο ύψος της οθόνης σε pixel:

document.getElementById("demo").innerHTML =
"Available Screen Height: " + screen.availHeight;

Το αποτέλεσμα θα είναι:

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Available screen height is " + screen.availHeight;
</script>

</body>
</html>

Βάθος χρώματος οθόνης παραθύρου

Η ιδιότητα screen.colorDepth επιστρέφει τον αριθμό των bit που χρησιμοποιούνται για την εμφάνιση ενός χρώματος.

Όλοι οι σύγχρονοι υπολογιστές χρησιμοποιούν υλικό 24 bit ή 32 bit για ανάλυση χρώματος:

24 bit = 16.777.216 διαφορετικά "True Colors"
32 bit=4.294.967.296 διαφορετικά "βαθιά χρώματα"

Παλαιότεροι υπολογιστές χρησιμοποιούσαν 16 bit: 65.536 διαφορετικές αναλύσεις "Υψηλά χρώματα".

Πολύ παλιοί υπολογιστές και παλιά κινητά τηλέφωνα που χρησιμοποιούσαν 8 bit: 256 διαφορετικά "χρώματα VGA".

Παράδειγμα

Εμφανίστε το βάθος χρώματος της οθόνης σε bit:

document.getElementById("demo").innerHTML = 
"Screen Color Depth: " + screen.colorDepth;

Το αποτέλεσμα θα είναι:

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen color depth is " + screen.colorDepth;
</script>

</body>
</html>

Οι τιμές #rrggbb (rgb) που χρησιμοποιούνται στην HTML αντιπροσωπεύουν τα "True Colors" (16.777.216 διαφορετικά χρώματα)

Βάθος εικονοστοιχείων οθόνης παραθύρου

Η ιδιότητα screen.pixelDepth επιστρέφει το βάθος pixel της οθόνης.

Παράδειγμα

Εμφάνιση του βάθους pixel της οθόνης σε bit:

document.getElementById("demo").innerHTML =
"Screen Pixel Depth: " + screen.pixelDepth;

Το αποτέλεσμα θα είναι:

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen pixel depth is " + screen.pixelDepth;
</script>

</body>
</html>

Για σύγχρονους υπολογιστές, το βάθος χρώματος και το βάθος εικονοστοιχείων είναι ίσα.