此處設置一個默認分辨率 1920*1080 , 設備尺寸15.6吋. （通常筆記本尺寸和分辨率）css
默認dpi（win屏幕通常爲72或96dpi） (PS默認新建文檔默認值72, 72通常在網絡上傳輸,300dip用於輸出打印)html
當設備的分辨率和設備尺寸不變的狀況下，設備屏幕dpi（win屏幕通常爲72或96dpi）在高於某個值（72或96dpi）的時候。屏幕的dpi就會影響網頁縮放（從而影響網頁佈局）ios
屏幕dpi是如何變化的呢？
默認狀況下：設備尺寸太小 , 分辨率太高致使設備dpi大於每英寸/72像素, windows會自動對屏幕顯示進行放大 . 進而致使瀏覽器展現的網頁被放大 (從而致使網頁中、字體、元素尺寸變大，致使網頁佈局錯亂)。windows
開發者爲了調試在不一樣dpi下網頁的縮放和佈局故意更改設備dpi。 瀏覽器
win10 調整dpi
網絡
125%、150%、175%、200%、300%表明放大等級，數值會由 windows系統自動設置，同時本身也可手動設置。佈局
蘋果手機4s之後與蘋果電腦retina屏 都表明着 系統dpi大於72或96或115dpi。
附經常使用尺寸表以及dpi https://uiiiuiii.com/screen/
默認狀況下，手機的尺寸較小，分辨率過大（1080或2k）致使設備dpi很是高（通常400以上）因此這就致使了網頁在手機上字體會被放大測試
解決方案
設置CSS 媒體查詢
@media screen根據不一樣的分辨率和dpi來改變網頁：字體、尺寸、和HTML排列方式。達到兼容不一樣分辨率和同一分辨率下dpi不一樣的網頁兼容。字體
css設置同dpi下,不一樣分辨率區間改變HTML佈局達到兼容
@media screen and (min-width: 990px/*起始最小寬度*/) and (max-width: 1200px/*結束最大寬度*/){
/*樣式書寫處*/
}
css設置同分辨率下,不一樣dpi改變網頁、字體大小、元素尺寸、和HTML排版方式
@media screen and (min-resolution: 1.25dppx), /*通用像素密度*/
(min-device-pixel-ratio: 1.25),/*安卓ios使用谷歌火狐瀏覽器也可以使用*/
(min-resolution: 115dpi) /*萬惡的IE*/
{
/*樣式書寫處*/
}
像素密度計算網站 http://dpi.lv網站
獲取當前設備的像素密度 https://bjango.com/articles/min-device-pixel-ratio/ 或者使用 http://matanich.com/examples/pixel-density-tests/
示例DEMO / 同分辨率下不一樣 dpi下處理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--響應式網頁 必備meta標籤-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.hh {
font-size: 16px;
background-color: rgb(255, 101, 101);
width: 500px;
}
/*像素密度計算網站 http://dpi.lv*/
/*獲取當前設備的像素密度 https://bjango.com/articles/min-device-pixel-ratio/*/
@media screen and (min-resolution: 1.25dppx/*通用像素密度*/),(min-device-pixel-ratio: 1.25/*谷歌或安卓或ios使用*/),
(min-resolution: 115dpi/*萬惡的IE*/)
{
.hh {
font-size: 30px;
background-color: rgb(255, 108, 108)
}
}
</style>
</head>
<body>
<p class="hh"> 這是測試文字</p>
</body>
</html>
真實示例
-
dpi放大倍率爲1時效果
-
請注意下方網頁UI字體大小 及柱狀圖下方文字菜單數量 以及 柱狀圖左側Y軸數值
-
上方紅線處是測試當前屏幕dpi 的放大倍數 (與windows 縮放與佈局處一直 100%等於此處的 1 具體請參見：本章屏幕dpi是如何變化的呢？)
-
dpi放大倍率爲1.25時效果
-
請注意下方網頁UI字體大小 及柱狀圖下方文字菜單數量 以及 柱狀圖左側Y軸數值
-
上方紅線處是測試當前屏幕dpi 的放大倍數 (與windows 縮放與佈局處一致 125%等於此處的 1.25 具體請參見：本章屏幕dpi是如何變化的呢？)