政府網站營運交流平台 - 國家發展委員會
:::

1.2 網頁設計應考量螢幕解析度

更新日期:103-10-22

本文閱讀說明閱讀

螢幕解析度受裝置的限制,影響使用者可看到的清晰度、版面大小及內容多寡。網頁設計應考量螢幕解析度,以達到最佳可視畫面。

適用等級

網站 外語版網站 行動版網站
入口網站 主題網站

適用入口、主題、外語版網站說明

螢幕解析度受裝置(Device)的限制,將影響使用者可看到的畫面品質。常見的螢幕比例有:4:3、16:9和16:10,一般在網頁設計時,會使用如1024 * 768、1280 * 1024、800

* 600的表示方法,但大致以上述三種比例為主。各種比例產生的解析度,可參考圖1 螢幕解析度。

適用行動版網站說明

行動裝置也有專用的瀏覽器,如適用於Android系統的Chrome Lite、Opera Mini 5 beta、Dolphin Browser;Apple - Safari(iPhone 內建)、Mercury Web Browser、Atomic Web Browser等。在行動版網站設計時,也應注意不同瀏覽器的呈現效果。

螢幕解析度
圖1  螢幕解析度

圖片來源:Wikipedia http://en.wikipedia.org/wiki/Computer_display_standard


網站設計者宜先決定設計為固定式或相對式的網頁。固定式網頁在小視窗中畫面會截斷,在大視窗中會呈現留白。相對式的網頁則具備大、小螢幕均適用的彈性,大螢幕的使用者可將視窗尺寸放大,以便一次看到最多內容,小螢幕的使用者也能因網頁重新編排而看到符合其視窗大小的網頁。

解析度較高時,畫面看起來較清晰,但較小;因此螢幕上可容納更多的項目。解析度較低時,螢幕中容納的項目較少,但會看起來比較大且更容易看見。不過,解析度極低時,影像可能會出現鋸齒狀的邊緣。

* 768(iPad、iPad 2)、960 * 640(iPhone 4 / 4S)和480 * 320(其他iPhone和iPod Touch)。

Andriod 目前可支援螢幕解析度相當多元;240 * 320、240 * 400、240 * 432、480 * 800、480 * 854、320 * 480、1280 * 800、540 * 960、360 * 640、640 * 960、1024 * 600、800 * 600、1366 * 768、800 * 400、1280 * 720。不過,目前Android手機大都是使用HVGA(320 * 480)及WVGA(480 * 800)。

上一章節
1.1 網站設計應考量使用者的裝置,支援不同的瀏覽程式
下一章節
1.3 提供友善列印版本
回目錄頁