Board logo

標題: [教學] (教學第24篇)系統資訊 下篇 [打印本頁]
作者: 小誌    時間: 2010-5-19 00:44     標題: (教學第24篇)系統資訊 下篇

screen物件
screen物件可以用來偵測與螢幕解析度相關的資訊，其屬性列表如下：

屬性

作用

screen.width

目前顯示器的寬度（單位;像素）

screen.height

目前顯示器的寬度（單位;像素）

screen.pixelDepth

顯示色彩度像素的位元數量

screen.colorDepth

可顯示的色彩數量




螢幕區域
[attach]703[/attach]
所謂螢幕區域，就是你目前螢幕的「解析度」，如果你要調整你目前顯示器的解析度，可以由「控制台」的「顯示器」項目中做設定，但是必須切換「顯示器內容」對話視窗的選項頁為「設定值」，然後在「螢幕區域」的項目中做設定，如上圖所示。

「解析度」的設定分為「水平」方向與「垂直」方向，其設定值是兩兩配對的，如果你的螢幕是17吋的，那你可能將解析度設為「800x600」，而螢幕15吋的，那你可能將解析度設為「640x480」，解析度越高畫面越精緻，但是畫面也會變小。

當我們以解析度「800x600」來設計網頁，若瀏覽者以「800x600」的解析度來觀看我們的網頁，則瀏覽者將可以瀏覽到畫面完整而內容正確的網頁，如下圖：
[attach]704[/attach]

但瀏覽者以「640x480」的解析度來觀看我們的網頁時，則瀏覽者將可能獲得如下圖的奇怪畫面：
[attach]705[/attach]

  為了讓我們精心設計的網頁能夠完整的顯示在瀏覽器中，避免因瀏覽者顯示器解析度與我們網頁設計時的解析度不同而造成瀏覽畫面偏差，所以我們可以利用screen物件對瀏覽者的顯示器解析度加以偵測，並告知瀏覽者適當的調整其顯示器解析度，以便獲得最佳的網頁觀賞畫面！

要得知瀏覽者顯示器「水平」方向的螢幕解析度，我們可以利用screen物件的『width』屬性，而使用screen物件的『height』屬性則可得知瀏覽者顯示器「垂直」方向的螢幕解析度。


實例學習：
利用screen物件的『width』屬性與『height』屬性偵測瀏覽者顯示器「水平」、「垂直」方向的螢幕解析度。
  1. <HTML>
  2. <HEAD>
  3. <TITLE>螢幕顯示區域</TITLE>
  4. </HEAD>
  5. <SCRIPT Language="JavaScript">
  6. //取得水平解析度
  7. x=screen.width
  8. //取得垂直解析度
  9. y=screen.height
  10. document.write("你目前螢幕的顯示區域為 "+x+"x"+y+" 像素")
  11. </SCRIPT>
  12. <BODY>
  13. </BODY>
  14. </HTML>
複製代碼
[attach]706[/attach]


實作學習：
瀏覽者顯示器解析度建議。
  1. <HTML>
  2. <HEAD>
  3. <TITLE>解析度建議</TITLE>
  4. </HEAD>
  5. <SCRIPT Language="JavaScript">
  6. //取得水平解析度
  7. x=screen.width
  8. //取得垂直解析度
  9. y=screen.height
  10. //判斷接析度是否符合條件
  11. if (x !=800 || y != 600)
  12. {
  13. alert("你目前的螢幕解析度為 "+x+"x"+y+" 像素\n請調整為800x600以符合本站最佳瀏覽環境")
  14. }
  15. else
  16. {
  17. alert("你目前的螢幕解析度為 "+x+"x"+y+" 像素符合本站最佳瀏覽環境")
  18. }
  19. </SCRIPT>
  20. <BODY>
  21. </BODY>
  22. </HTML>
複製代碼
[attach]707[/attach]
作者: 小誌    時間: 2010-5-19 00:50

色彩度偵測
[attach]708[/attach]

與顯示器設定相關的項目還有一個「色彩」，也就是設定在螢幕上可以見到的色彩數目，顯示器可設定的色彩數量有「4位元/16色」、「8位元/256色」、「16位元/高彩」與「32位元/全彩」。

色彩度越高，可用顏色就多，相對的，網頁中的圖像也就更逼真，當我們以「16位元/高彩」的色彩度設計網頁，若瀏覽者同樣以「16位元/高彩」的色彩度來觀看我們的網頁，則瀏覽者將可以瀏覽到色像正確的網頁畫面，如下圖：
[attach]709[/attach]

若我們以「16位元/高彩」的色彩度設計網頁，而瀏覽卻以低於「８位元/256色」的色彩度來觀看我們的網頁，則瀏覽者所瀏覽的網頁畫面將是不堪入目，如下圖(以「4位元/16色」瀏覽)：
[attach]710[/attach]

要避免瀏覽者因色彩度不夠而造成網頁顯示畫面失真，我們可以利用screen物件對瀏覽者的顯示器色彩度加以偵測，並告知瀏覽者適當的調整其顯示器色彩度，以便獲得最佳的網頁觀賞畫面！

screen物件有兩個屬性可用來偵測使用者顯示器的色彩度，一是「pixeDepth」屬性，用來偵測每個顯示像素的位元數，請注意：「pixeDepth」屬性的值是「位元數」！其屬性值是一個數字，例如，色彩度為「16位元/高彩」，則「pixeDepth」屬性的值是「16」；另一個可用來偵測使用者顯示器的色彩度屬性是「colorDepth」，用來偵測可顯示的顏色數量，其屬性值也是一個數字。

「pixeDepth」屬性為Netspace適用，而「colorDepth」屬性為Internet Explorer（IE）適用，因此，在偵測使用者顯示器的色彩度之前，必須先使用瀏覽器物件『navigator』的「appName」屬性判別瀏覽者是使用哪一種瀏覽器，再依照瀏覽器種類選用適當的色彩度偵測屬性！


實作學習：
利用screen物件的「pixeDepth」屬性與「colorDepth」屬性偵測使用者顯示器的色彩度。
  1. <HTML>
  2. <HEAD>
  3. <TITLE>色彩度</TITLE>
  4. </HEAD>
  5. <SCRIPT Language="JavaScript">
  6. //偵測瀏覽者所使用的瀏覽器
  7. if (navigator.appName == "Netcape")
  8. {
  9. //瀏覽器為Netscape取用pixelDepth屬性
  10. colornum=screen.pixelDepth
  11. }
  12. else
  13. {
  14. //瀏覽器為IE取用colorDepth屬性
  15. colornum=screen.colorDepth
  16. }

  18. if(colornum == 4){msg="4位元16色"}
  19. if(colornum == 8){msg="8位元256色"}
  20. if(colornum == 16){msg="16位元高彩"}
  21. if(colornum == 32){msg="32位元全彩"}

  23. document.write("你目前的顯示器彩度為 "+msg)
  24. </SCRIPT>
  25. <BODY>
  26. </BODY>
  27. </HTML>
複製代碼
[attach]711[/attach]


實作學習：
瀏覽者顯示器色彩度建議。
  1. <HTML>
  2. <HEAD>
  3. <TITLE>色彩度建議</TITLE>
  4. </HEAD>
  5. <SCRIPT Language="JavaScript">
  6. //偵測瀏覽者所使用的瀏覽器
  7. if (navigator.appName == "Netcape")
  8. {
  9. //瀏覽器為Netscape取用pixelDepth屬性
  10. colornum=screen.pixelDepth
  11. }
  12. else
  13. {
  14. //瀏覽器為IE取用colorDepth屬性
  15. colornum=screen.colorDepth
  16. }
  17.        
  18. if(colornum == 4){msg="4位元16色"}
  19. if(colornum == 8){msg="8位元256色"}
  20. if(colornum == 16){msg="16位元高彩"}
  21. if(colornum == 32){msg="32位元全彩"}

  23. if (colornum<16)
  24. {
  25. alert("你目前的顯示器彩度為 "+msg+"\n請將色彩度調整在16位元以上")
  26. }
  27. else
  28. {
  29. alert("你目前的顯示器彩度為 "+msg+"\n符合本站色彩度要求")
  30. }
  31. </SCRIPT>
  32. <BODY>
  33. </BODY>
  34. </HTML>
複製代碼
[attach]712[/attach]



歡迎光臨 麻辣家族討論版版 (http://forum.twbts.com/)