近期在開發給顯示器端顯示的畫面時,若螢幕顯示器上是使用「內建的瀏覽器」的話,那就有機會踩到「螢幕解析度」和「瀏覽器寬高」不同的情形。這邊筆記下開發時的注意事項。
內容
[ 檢測網站 ] : https://tw.piliapp.com/what-is-my/screen-resolution/
螢幕解析度
瀏覽器開啟時,是抓取 window.screen.width (height) 以及 window.devicePixelRatio 的乘積而得。若 window.devicePixelRatio 為 1 且螢幕顯示器 1:1 完整顯示沒有分割畫面時,是一模一樣的。
瀏覽器寬高
這個值為 window.screen.width (height) 的值
開發注意事項
不同的電視,其內部的瀏覽器所呈現的「瀏覽器寬高」是不同的。這個值也不建議更改,因為這是針對該顯示器最佳的顯示比例。因此在開發網頁時,需要針對不同的瀏覽器寬高進行更細部的設置。不要以「設備」為基準,而是以「不同螢幕寬度」為基準,來設置不同的模式
Best Practice
1. 螢幕寬度 479 px 以下,定義為「小螢幕」
2. 螢幕寬度 480 px ~ 767px ,定義為「中螢幕」
3. 螢幕寬度 768 px ~ 1023px ,定義為「大螢幕 -> 等價於平板」
4. 螢幕寬度 1024 px 以上 ,定義為「特大螢幕 -> 等價於桌機」
相關網站
1. 我的螢幕解析度是多少?
2.