[筆記] 開發網頁應用並顯示於電視上 – 螢幕解析度與瀏覽器寬度區別

近期在開發給顯示器端顯示的畫面時,若螢幕顯示器上是使用「內建的瀏覽器」的話,那就有機會踩到「螢幕解析度」和「瀏覽器寬高」不同的情形。這邊筆記下開發時的注意事項。

laptop mac


內容

[ 檢測網站 ] : https://tw.piliapp.com/what-is-my/screen-resolution/

螢幕解析度

瀏覽器開啟時,是抓取 window.screen.width (height) 以及 window.devicePixelRatio 的乘積而得。若 window.devicePixelRatio 為 1 且螢幕顯示器 1:1 完整顯示沒有分割畫面時,是一模一樣的。

瀏覽器寬高

這個值為 window.screen.width (height) 的值

notes-develop-resolution-screen-browser-width-1

開發注意事項

不同的電視,其內部的瀏覽器所呈現的「瀏覽器寬高」是不同的。這個值也不建議更改,因為這是針對該顯示器最佳的顯示比例。因此在開發網頁時,需要針對不同的瀏覽器寬高進行更細部的設置。不要以「設備」為基準,而是以「不同螢幕寬度」為基準,來設置不同的模式

Best Practice

1. 螢幕寬度 479 px 以下,定義為「小螢幕」
2. 螢幕寬度 480 px ~ 767px ,定義為「中螢幕」
3. 螢幕寬度 768 px ~ 1023px ,定義為「大螢幕 -> 等價於平板」
4. 螢幕寬度 1024 px 以上 ,定義為「特大螢幕 -> 等價於桌機」


相關網站

1. 我的螢幕解析度是多少?
2.

按讚加入粉絲團

延伸閱讀