CSS - 像素密度獨立設計，CSS像素在桌面上大50％

Question

我在網上做了很多研究，但我仍然不確定如何處理我的網絡應用程序中不同的屏幕密度。我發現這個網站上唯一有用的問題和答案是這樣的：Getting the physical screen dimensions/dpi/pixel density in Chrome on Android

根據最高評分答案，「50px應該看起來在所有移動設備上大致相同，但它可能會有所不同，但CSS像素是我們的設備獨立的方式來構建一致的文檔和用戶界面的「

真的嗎？也許對於大多數移動設備來說，這是真的，我在兩部手機上測試了我的應用程序，一部分使用了144ppi，另一部分使用了288ppi，而且看起來還是一樣。但是在桌面上，它卻更大。桌面上的CSS像素大約大50％。這是一個問題，因爲即使您有單獨的大屏幕和小屏幕設計，也有很多移動設備應該被視爲大屏幕，例如橫向模式下的平板電腦。因此，假設您爲桌面設計了某些東西，只是對平板電腦看起來體積縮小了50％感到失望。

在我看來，像是設備像素比例不正確。我用這個網站來測試我的屏幕：https://bjango.com/articles/min-device-pixel-ratio/ 筆記本屏幕是96DPI，-webkit敏設備象素比= 1.0 智能手機是144dpi和裝置中的像素比爲1.5

所以理論上，根據本信息的元素應該在移動設備上顯示相同。 144/1.5 = 96但事實並非如此。這就像DPR工作不正常。

UPDATE1： 我找到這個上MDN

的缺省比值取決於顯示密度。在具有 密度小於200dpi的顯示器上，比率爲1.0。在密度爲 的介於200和300dpi之間的顯示器上，比率爲1.5。對於密度高於300dpi的密度爲 的顯示器，該比率是整數地板（密度/ 150dpi）。注意 只有當視口比例等於1時默認比例才爲真。 否則，CSS像素與設備像素 之間的關係取決於當前縮放級別。

我不知道它是否仍適用於所有設備，但在我的例子中似乎是這樣。這真是太糟了。 50％的差異是巨大的。我無法相信網絡還沒有更好的提供。 它也是怪異WebKit所敏設備象素比率顯示1.5，但實際上它是1.0

UPDATE2：

確定，所以我開始一個獎金。我只想要一些答案，最佳實踐，CSS像素不均衡的其他可能情況，一些鏈接。在這種情況下任何可以幫助我的東西。

讓我再次陳述我的具體問題。我有一個跨平臺的網絡應用程序，應該在桌面，手機和平板電腦上運行。由於不同的像素密度，應用程序的每個元素在96dpi筆記本電腦屏幕上比在移動設備（144 dpi）上大出50％。我真正感興趣的一件事是，爲什麼即使該設備的window.devicePixelRatio = 1.5，瀏覽器將其視爲1.0（否則它看起來與桌面上的相同）。

我使用一種設計的桌面和平板電腦，分辨率真的沒有關係。我的網絡應用程序是獨立的，所以桌面用戶可以將窗口寬度設置爲800px。但與平板電腦相比桌面上的東西太大了。我將不得不爲平板電腦和桌面上的元素設置不同的尺寸。我想到的一件事是使用媒體查詢，（min-device-pixel-ratio：1.5）將爲移動設備設置樣式。

所以我有一個可能的解決方法，但我想知道更多關於CSS像素不一致性。這是僅僅針對移動還是桌面還是更多問題？在我看來，它似乎在移動設備上差不多，但我無法測試它。我想討論一下這個話題，其他可能的解決方法，最佳實踐和一些資源。我搜索了，我在網上找不到任何東西。每個人都只是說，「CSS像素是我們密度獨立像素」，但這裏是真理：

Answer 1

我不會太卡上的像素比，它只是與觸摸的距離有關事件。使用響應式佈局，px單位最適合需要偏移定位的位圖和僞元素。對於設備響應式佈局，使用可縮放單元如%，em,vh,vw等要好得多。

您可以使用em單位來確保一致的縮放比例，以便通過添加此代碼行來縮放需要縮放的元素。

document.body.style.fontSize = (document.body.offsetWidth * .282) + '%'; 

的0.282的歸一化值到可接受的量時，fontSize的將是相對於所述裝置的寬度，並且將影響使用該em單元，用於上漿的所有元素。

Answer 2

尺寸差異是由設計決定的。移動設備通常更靠近眼睛，由於屏幕尺寸較小，因此需要將更多空間擠入較小的空間。

問題是，計算機可能甚至不知道屏幕的大小，或者相同的圖像可能會鏡像到兩個不同的屏幕上 - 例如筆記本電腦顯示器和投影儀 - 其尺寸明顯不同。最重要的是，大多數電腦和一些手機允許屏幕元素縮放，這也會影響網站上元素的大小。此外，無論如何，在手機和巨型投影機或50英寸電視上，您都不希望圖標的長度爲2釐米x 2釐米。

但即使您因任何原因想要，但不幸的是沒有辦法迫使你的內容以完全相同的現實世界中的尺寸在所有設備上進行渲染。單位像mm，cm，in，pt和pc會產生廣泛不一致的結果和shouldn't be used for content intended for screens。

對於網站的響應，你應該使用<meta name="viewport" content="width=device-width, initial-scale=1"/>元標記，如果你打算使用px單位。這將確保，即the website scales properly。但是，這並不能使所有設備上的CSS像素大小完全相同，也不打算。瀏覽器在選擇CSS像素尺寸時僅考慮設備尺寸和設備分辨率，不會嘗試重新調整尺寸以適合手機上的桌面版網站。這種方法我親自更喜歡和找到我的跨平臺網絡應用程序按照預期跨設備的比例。

使用前面提到的meta tag的另一種選擇是使用em or rem使頁面上的元素與設備font size相關。雖然em和rem分別指當前的element和root elementfont-sizes，但這些單元可以用於其他規則，如width和padding，以使它們按照供應商設置的字體大小進行縮放。這是有效的，因爲不同的設備對於根元素將具有不同的默認字體大小（通常對於較大的像素密度來說較大的字體以提供大致一致的字體大小）。因此，使用em和rem將相應地進行縮放 - 除非您在CSS中用絕對值覆蓋它。雖然rem（rootfont size）在某些情況下更方便，但請注意，only the newest Internet Explorer supports it。

自然，創建縮放內容時，視口單元vw, vh, vmin and vmax可以有很大的幫助。但是，這些不會幫助您創建內容。總而言之，如果我是你，我不會那麼在意在所有顯示器上使元素尺寸完全相同;這是徒勞的追求。你不但不會成功，但即使你做到了，你網站的可用性也會受到影響。