網頁實現 1CM 物理長度_Jimmy

攜手創作，共同成長！這是我參與「掘金日新計劃 · 8 月更文挑戰」的第20天，點選檢視活動詳情

今天，我們來探討下這個問題：

在不需要使用者參與的情況下，我們能否在瀏覽器上實現物理長度的 1 釐米呢？

我們先來簡單給個答案：

答案（點選展開）

在使用者不參與的情況下，我們不能靠程式在網頁上獲取到準確的瀏覽器物理長度 1 釐米。

本文基於本人實際開發內容的記錄

釐米和畫素

釐米跟其他的單位（比如英寸）有明確的轉換關係。而跟畫素沒有明確的轉換關係（換一個瀏覽器可能得到的長度就不同了）。

畫素受到 dpr 等的影響。

對於 dpr，ppi 等相關知識點，讀者可自行百度

我們談到電腦螢幕的時候，都是使用國際長度單位 inch 英寸來表達，而英寸和釐米之間是有固定的關係的：

1 inch = 2.54cm

實現

嗯，在請教了公司的大佬和發起網路詢問之後 How to calculate 1cm equal ? px in website?，得到總結：

既然我們不能單純的通過程式去實現瀏覽器上的物理長度 1 釐米。那麼，我們可以考慮讓使用者以最小的成本參與進來。我們可以考慮下面的這兩個方案：

方案1:

答案（點選展開）

1. 我們可以通過 window.screen 的屬性來得到瀏覽器的尺寸
2. 通過 Math.sqrt() 方法算出斜邊的長度（ * px）
3. 我們可以讓使用者輸入當前顯示器的尺寸（ * 英寸），我們通過公式轉換成 * cm
4. 之後我們就可以計算出在當前瀏覽器中 1cm 等於 ？px 了
5. 將相應數值快取下來，下次開啟瀏覽器的時候呼叫快取

方案2:

答案（點選展開）

1. 我們提供一個物理尺寸給使用者
2. 提供一個預設的 ppi 的數值選擇範圍，
類似站點 http://louischan.github.io/ruler-html/ 【見下圖】。
通過自己設定的公式計算，比如 chartContainerWidth / (PPiValue / 2.54)
3. 當調節到一定距離的符合要求的時候，將相應數值快取下來，下次開啟瀏覽器的時候呼叫快取

當然，讀者有什麼更好實現的方案，可以留言交流。

往期精彩推薦

如果讀者覺得文章還可以，不防一鍵三連：關注➕點贊➕收藏