[H5] 偵測不同裝置的解析度


在 DHTML4 的年代,我常常用 VML 來處理未知螢幕解析度的縮放,到了 HTML5 的年代,當然就是改用 SVG 。

使用 SVG 處理縮放通常希望開啟網頁時,能自動縮放到最佳解析度,Windows 下還好除錯,行動裝置就很麻煩了。

Windows 裝置 IE/Edge 支援縮放,Chrome 則不支援。

原先寫的程式碼多半參考網路上的,各有出處,說法也不同,所以就發生 Android 正常時,iOS 就不正常,iOS 正常時,Android 就不正常。

所以乾脆用個除錯網頁分別讓不同瀏覽器去跑,下表是三個裝置 javascript 抓到的值,其中 IE11 的螢幕解析度 1920×1080 ,螢幕字型 125% (120 DPI) 。

IE11 Android 8.0 iOS 11.4
window.innerWidth 1536 1440 980
window.innerHeight 807 2240 1472
window.outerWidth 1550 360 0
window.outerHeight 878 560 0
window.screenX -7 0 0
window.screenY -7 0 0
window.scrollX undefined 0 0
window.scrollY undefined 0 0
window.pageXOffset 0 0 0
window.pageYOffset 0 0 0
window.devicePixelRatio 1.25 3 3
window.screen.width 1536 360 414
window.screen.height 864 640 736
window.screen.availWidth 1536 360 414
window.screen.availHeight 864 640 736
window.screen.deviceXDPI 120 undefined undefined
window.screen.deviceYDPI 120 undefined undefined
window.screen.logicalXDPI 96 undefined undefined
window.screen.logicalYDPI 96 undefined undefined
window.screen.systemXDPI 120 undefined undefined
window.screen.systemYDPI 120 undefined undefined
window.screen.pixelDepth 24 24 32
window.screen.msOrientation landscape-primary undefined undefined
document.body.clientWidth 1503 964 964
document.body.clientHeight 2555 5674 3201
document.body.scrollWidth 1848 4900 987
document.body.scrollHeight 2555 5695 3243

果然實作才是硬道理,可以得到:

實際解析度寬:window.screen.width * window.devicePixelRatio

實際解析度高:window.screen.height * window.devicePixelRatio

針對 Android 8.0 的分割視窗會發現 window.screen.height 變小,仍可使用 (分割時為 247)

至於最適化 (Auto fitting) 螢幕大小部分,我原先是先在 HTML5 的 HEAD 預埋:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=0.1″ id="metaViewport" />

再透過 javascript 依 svg 圖面大小變更 metaViewport.setAttribute(“content", sViewportContent);

從網頁搜尋到的結果,一般是將 width=設定寬度, height=設定高度

自己整理表格後發現,用 sViewportContent = “initial-scale=" + scaleWidth; 即可。

使用 svg.width / window.screen.width 或 svg.height / window.screen.height 就看設計者要以寬度或高度為目標來調整。

廣告
Categories: 工作點滴, 技術分享 | 標籤: | 發表留言

文章分頁導航

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

在 WordPress.com 建立免費網站或網誌.

%d 位部落客按了讚: