裝置解析度建議

【電腦裝置解析度建議】RWD響應式設計與螢幕解析度的密切關係

【電腦裝置解析度建議】RWD響應式設計與螢幕解析度的密切關係

 

在現代網頁設計中,為了確保網站在電腦、平板或手機...等裝置上,都能正常瀏覽並保持一致的優良體驗,「RWD響應式設計」已經是非常普及的網頁設計標準。不過「RWD響應式設計」仍存在著某些問題,因此為了確保網站的優良體驗,會建議將螢幕解析度調整為最多人使用且普遍的設定,如此便可達到最優異的網站體驗。

RWD響應式設計

 「RWD響應式設計」是一種網頁設計的技術,它能讓網站在不同的裝置、解析度和螢幕尺寸上,以最好的瀏覽體驗呈現,減少使用者需要透過縮放、平移和捲動等操作行為才能正常瀏覽網站的情況。

 

RWD響應式設計

▲ 擁有RWD響應式設計的網站,便能相容於多個不同螢幕大小的裝置中,以優越的體驗及畫面呈顯給使用者

 

延伸閱讀:什麼是RWD響應式網頁設計?

 

常見的解析度

 有些使用者在使用裝置檢視內容時,會因為不小心、特殊需求或是其他狀況,將裝置解析度調整成較為不同的比例,因此在檢視網站時,就會感到不易使用或奇怪

 以下為常見的裝置解析度,因此若在檢視網站時感到奇怪,建議可以調整成以下常見的解析度

 

桌面型電腦

  • 1920 x 1080(Full HD)
    這是目前最常見的桌面解析度,許多顯示器和筆記本電腦都採用這一解析度,若使用電視螢幕檢視網站,使用此解析度亦可提供良好的顯示效果。
     

解析度設定

▲ 某些設定中,會自動將比例設定為125%,這裡也建議將其更改為100%

 

筆記型電腦

  • 1366 x 768
    經濟型和入門級筆記本電腦常見的解析度。
     
  • 1920 x 1080 1680 x 1050(Full HD):
    中高端筆記本電腦的標準解析度。
     

蘋果電腦顯示器之解析度設定

▲ 蘋果電腦之顯示器解析度,建議設定為預設值

 

平板電腦

 平板電腦一般不會特別提供使用者調整解析度,若需要更改也須root調整,因此若感到網站顯示怪異,建議透過文字大小進行調整。

 若已更改螢幕解析度,建議以下。

  • 1024 x 768:
    一些入門級平板電腦的解析度。
     
  • 1366 x 768:
    一些平板電腦的解析度,適合較為經濟的設備。
     

平板字型大小調整

▲ 透過文字大小進行調整

 

安卓

  • 1080x1920(Full HD):
    中端和一些高端智能手機的解析度。

 雖然安卓可提供使用者調整解析度,但一般也不會特別調整,若感到網站顯示怪異,一樣可至設定中調整為建議解析度。

 

iPhone

 蘋果手機一般無法調整螢幕解析度,但如果你感覺網頁顯示怪異,也許是文字大小所致

 建議可至「設定> 螢幕顯示與亮度>文 字大小> 調整文字大小」將文字調整為一般大小。

手機字體大小調整

▲ 透過文字大小進行畫面顯示調整

 

裝置解析度建議

 「RWD響應式設計」的確可以依照不同的裝置大小、畫面及解析度,像水一樣的將網站介面填滿整個螢幕畫面,但是,如果使用的裝置解析度不同於一般大多數使用者的解析度設定時,使用者在檢視網站時,仍可能感到奇怪。

 因此,天矽科技會建議客戶,針對不同的電腦裝置,應設定不同的解析度標準

  1. PC電腦版(1920px)
  2. NB筆電(1680px、1366px)
  3. PAD平板(1366px、1024px、768px)
  4. Mobile手機/IOS
  5. Mobile手機/Andriod

正常解析度之網頁設計畫面

▲ 建議解析度底下之網站顯示畫面

 

share FB LINE
看天矽作品集 回上一頁
ID:@323foylw