取得各種尺寸資訊
在瀏覽器內透過JavaScript可以讀取螢幕尺寸、瀏覽器視窗尺寸、瀏覽器可視區尺寸、整個網頁的尺寸、縮放比例等。但是使用的時候要從各個不同的Object讀取，因此我寫成一個JavaScript的function，將各個資訊包裝成一個Object可以直接讀取使用。
/**
* 取得各種尺寸資訊
* https://klab.tw/2022/10/get-browser-size-version-and-document-size/
*/
function getBrowserInfo() {
return {
// 螢幕尺寸（可能不準確）
screenHeight: screen.height,
screenWidth: screen.width,
// 瀏覽器內網頁可視尺寸（去除上面的網址列、右邊的選軸等）
innerHeight: window.innerHeight,
innerWidth: window.innerWidth,
// 瀏覽器整體尺寸（包含上面的網址列、右邊的選軸等）
outerHeight: window.outerHeight,
outerWidth: window.outerWidth,
// 網頁尺寸（Document尺寸）
pageHeight: document.documentElement.scrollHeight,
pageWidth: document.documentElement.scrollWidth,
// 瀏覽器時區，例如：Asia/Taipei
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
// 瀏覽器時區，例如：8（代表是+8時區）
timeOffset: (-(new Date().getTimezoneOffset()) / 60),
// 瀏覽器語言，例如：zh-TW
language: navigator.language,
// 螢幕色彩深度
colorDepth: screen.colorDepth,
// 縮放比例，現在手機上常見的是3，代表3:1
devicePixelRatio: window.devicePixelRatio
}
}需要注意當Device Pixel Ratio是1的時候代表1:1，Screen Height與Screen Width的數值基本上是準的，代表著螢幕的解析度。但是Device Pixel Ratio不是1的時候，例如在手機上是2或3，這時候Screen Height與Screen Width可能是真實的解析度，也可能是被縮放的數字，要再乘上Device Pixel Ratio才是真實解析度。
在Windows的螢幕設定上，如果字體大小選擇125%就會看到Device Pixel Ratio是1.25，選擇150%就會看到1.5，以此類推。
取得作業系統與瀏覽器資訊
這邊推薦透過別人寫好的套件，名稱簡單明瞭叫做「platform」。
NPM：https://www.npmjs.com/package/platform
GitHub：https://github.com/bestiejs/platform.js
安裝
透過NPM安裝：
npm i --save platform或是下載後直接在網頁內載入：
<script src="platform.js"></script>使用方式
直接使用platform物件就可以了，例如platform.name可以讀取瀏覽器名稱，可以參考下面的說明與實際範例。platform的資訊是讀取瀏覽器的User-Agent分析出來的，但User-Agent因為一些歷史原因，上面會寫上一堆假的資料，因此有時候分析出來的內容不太準，例如幾乎每個瀏覽器都會標註Mozilla[1]、在iPad上的OS卻寫著「OS X」[2]，或是在Apple Silicon晶片的Macbook上出現Intel的字樣[3]。
[1] 可以參考這篇問答：Why do Chrome and IE put “Mozilla 5.0” in the User-Agent they send to the server? ，簡單說是因為有些伺服器會依據不同瀏覽器給與不同的程式碼，所以各個瀏覽器都會偽裝自己是某某瀏覽器或是某某設備來拿到每個版本的完整程式碼😂。
[2] 我的iPad pro是iPad OS Beta版，上面寫作業系統是OS X。但另一台iPad mini是iPad OS 15正式版，作業系統顯示的是iOS。
[3] 估計這也跟第一點的原因一樣。
// 瀏覽器相關
platform.ua // 瀏覽器的User-Agent，platform分析的來源
platform.name // 瀏覽器名稱，例如Chrome、Safari、FireFox
platform.version // 瀏覽器版本
platform.layout // 瀏覽器排版引擎，例如Blink、WebKit、Gecko
platform.manufacturer // 設備製造商，例如Apple、Samsung，此欄位常常為null
platform.product // 設備名稱，例如iPhone，此欄位常常為null
platform.description // 說明
// OS相關，但有時不太準
platform.os.family // OS名稱
platform.os.version // OS版本
platform.os.architecture // OS位元（32或64）OS位元的部分，我目前測試沒有明確標注自己是64位元作業系統的瀏覽器，都會被當成32位元，所以不太準。下面在iPhone實測的篇章有更多說明。
實測在Macbook的Chrome顯示的訊息
{
"description": "Chrome 105 on OS X 10.15 64-bit",
"layout": "Blink",
"manufacturer": null,
"name": "Chrome",
"prerelease": null,
"product": null,
"ua": "Mozilla/5.0 (Macintosh; ...略",
"version": "105",
"os": {
"architecture": 64,
"family": "OS X",
"version": "10.15"
}
}可以看到manufacturer和product欄位都是null，這兩個欄位還滿容易出現null的情況，尤其是使用非行動裝置的時候。有在用Google Analytics的人也會注意到，在Google Analytics上面的裝置分析中，製造商和裝置型號也常常沒有資料。
實測在iPhone的Safari顯示的訊息
{
"description": "Safari 16.0 on Apple iPhone (iOS 16.0)",
"layout": "WebKit",
"manufacturer": "Apple",
"name": "Safari",
"prerelease": null,
"product": "iPhone",
"ua": "Mozilla/5.0 (iPhone; CPU iPhone...略",
"version": "16.0",
"os": {
"architecture": 32,
"family": "iOS",
"version": "16.0"
}
}現代的iPhone都是64位元的CPU了，上面卻寫著32，後來看三星手機上也是寫32，我猜是因為沒有出現64-bit之類的關鍵字都會被platform當成32位元。
如果是手機瀏覽器，manufacturer的部分幾乎都會顯示正確的廠牌名稱，但是product的部分iPhone只會顯示iPhone，不會出現是第幾代的。而三星、小米、HTC都會顯示詳細的型號，但這些型號不是一般我們稱呼的型號，像是三星的Galaxy S20 FE寫著SM-G781B，需要再去Google搜尋才能知道是哪一隻手機。以上這些東西在User-Agent都會看到關鍵字，在Google Analytics上也是看到一樣的結果，看起來Google Analytics跟platform一樣都是解析瀏覽器的User-Agent資訊吧。