裝置解析度與畫素密度對網頁縮放的影響

我的筆記解析度 2560*1600 比例16:10 , 裝置尺寸16吋

預設dpi (畫素密度)如圖 紅框中顯示

當裝置的解析度和裝置尺寸不變的情況下，裝置螢幕dpi（畫素密度）在高於某個值的時候。螢幕的dpi(畫素密度)就會影響網頁縮放（從而影響網頁布局）訪問此位址檢視電腦螢幕當前解析度和使用的dpi

預設情況下：裝置尺寸過小 , 解析度過高導致裝置dpi大於每英吋/72或96, windows會自動對螢幕顯示進行放大 。 進而導致瀏覽器展示的網頁被放大(從而導致網頁中、字型、元素尺寸變大，導致網頁布局錯亂)。開發者為了除錯在不同dpi下網頁的縮放和布局故意更改裝置dpi。

以win10為例 調整dpi

這時候再訪問 檢視螢幕解析度和 dpi 結果如下

**在解析度不變，且螢幕比例不變（16:10）的情況下 改變螢幕的縮放比例（dpi）會將螢幕的解析度改變且影響網頁中的 元素寬度以及字型大小等。導致網頁布局出現問題

如使用的裝置比例不變（16:9） 或 （16:10）這兩種在當下比較常見的 網頁只需要按照此比例的設計稿還原即可。即便用在4k 或 更大解析度的顯示器上，系統（win或mac）會自動設定縮放比例。網頁也可達到乙個比較好的瀏覽效果

以上的方式較為適用於 甲方固定的使用場景 如大屏 如 某個資訊系統 因為他們的裝置多為統一採購。保證硬體統一性即可。 大屏也可一開始設定為大屏的真實解析度，網頁開發直接將字型或元素尺寸寫大，不使用系統的自動縮放（但此時應該關閉系統的自動縮放）看取捨吧

如果是一般性網頁 要給使用者使用（比如電腦和手機或ipad訪問） 這時候不僅要考慮解析度不變 縮放（dpi）變化帶來的影響 還要考慮 縮放（dpi）不變 解析度變化帶來的影響 。一般採用 **查詢+js設定字型rem的方式來實現

**查詢中又分為 解析度的**查詢

css設定解析度區間改變html布局達到相容

@media screen and (
min-width
: 990px/*起始最小寬度*/
) and (
max-width
:1200px/*結束最大寬度*/
)

@media screen and (

min-resolution
: 1.25***x)
,/*通用畫素密度*/
(min-device-pixel-ratio
: 1.25)
,/*安卓ios使用谷歌火狐瀏覽器也可
使用*/
(min-resolution
: 115dpi)
/*ie 要使用 dpi單位 google的***x不支援*/

/**

* 該方法是以iphone6（真機寬度：375）對於設計稿web寬度（750）來計算rem
* 其他元素px值轉換為rem則使用：rem=px/100
*/function
setrem()
// 初始化
setrem
()

解析度改變的操作

css設定解析度區間改變html布局達到相容

@media screen and (
min-width
: 990px/*起始最小寬度*/
) and (
max-width
:1200px/*結束最大寬度*/
)

@media screen and (

min-resolution
: 1.25***x)
,/*通用畫素密度*/
(min-device-pixel-ratio
: 1.25)
,/*安卓ios使用谷歌火狐瀏覽器也可
使用*/
(min-resolution
: 115dpi)
/*ie 要使用 dpi單位 google的***x不支援*/
## 示例demo / 同解析度下不同 dpi下處理
```html
"hh"> 這是測試文字