文章出處

前面的話

  screen對象在javascript編程中,比較冷門,不太常用。screen對象用來表明客戶端的能力,其中包括瀏覽器窗口外部的顯示器的信息,如像素高度和寬度等。本文將詳細介紹screen對象

 

總括

  每個瀏覽器中的screen對象都包含著各不相同的屬性,其中chrome包含9個屬性,firefox包含10個,IE8-瀏覽器包含14個,IE9+瀏覽器包含17個。下面將這17個屬性概述如下

屬性              說明

height            屏幕的像素高度
width             屏幕的像素寬度
availHeight       屏幕的像素高度減去系統部件高度之后的值(只讀)
availWidth        屏幕的像素寬度減去系統部件寬度之后的值(只讀)

left              當前屏幕距左邊的像素距離[firefox返回0,chrome和IE不支持]
top               當前屏幕距上方的像素距離[firefox返回0,chrome和IE不支持]
availLeft         未被系統部件占用的最左側的像素值(只讀)[chrome和firefox返回0,IE不支持]
availTop          未被系統部件占用的最上方的像素值(只讀)[chrome和firefox返回0,IE不支持]

bufferDepth       讀、寫用于呈現屏外位圖的位數[IE返回0,chrome和firefox不支持]
colorDepth        用于表現顏色的位數(只讀)[IE8-返回32,其他瀏覽器返回24]
pixelDepth        屏幕的位深(只讀)[IE8-不支持,其他瀏覽器返回24]

deviceXDPI        屏幕實際的水平DPI(只讀)[IE返回96,chrome和firefox不支持]
deviceYDPI        屏幕實際的垂直DPI(只讀)[IE返回96,chrome和firefox不支持]
logicalXDPI       屏幕邏輯的水平DPI(只讀)[IE返回96,chrome和firefox不支持]
logicalYDPI       屏幕邏輯的垂直DPI(只讀)[IE返回96,chrome和firefox不支持]

updateInterval      讀、寫以毫秒表示的屏幕刷新時間間隔[IE返回0,chrome和firefox不支持]
fontSmoothingEnabled     是否啟用了字體平滑(只讀)[IE返回true,chrome和firefox不支持]

 

常用

【availHeight】

  屏幕的像素高度減去系統部件高度之后的值(只讀),代表屏幕可用高度,單位為像素

【availHeight】

  屏幕的像素寬度減去系統部件寬度之后的值(只讀),代表屏幕可用寬度,單位為像素

console.log(screen.availHeight);//1040
console.log(screen.availWidth);//1920

【height】

  屏幕的像素高度

【width】

  屏幕的像素寬度

console.log(screen.width);//1920
console.log(screen.height);//1080

  screen.height和screen.width兩個屬性,一般用來了解設備的分辨率。除非調整顯示器的分辨率,否則這兩個值可以看作常量,不會發生變化。顯示器的分辨率與瀏覽器設置無關,縮放網頁并不會改變分辨率

  可以根據屏幕分辨率,將用戶導向不同網頁

if ((screen.width <= 800) && (screen.height <= 600)) {
window.location.replace('small.html');
} else {
window.location.replace('wide.html');
}

文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()