iPhone需要媒體查詢的最小寬度：768px

我有一個登陸頁面，其中CSS的結構是這樣的：iPhone需要媒體查詢的最小寬度：768px

body { 
    background: white; 
} 

@media (min-width: 768px) { 
    body { 
     background: red; 
    } 
} 

@media (max-width: 767px) { 
    body { 
     background: blue; 
    } 
}

在臺式Safari和iPhone（一個真正的，實際的iPhone 6S設備上進行測試），身體背景爲紅色。無論我嘗試應用什麼（設備比率x2等），我都無法設置iPhone上的背景blue。

我錯過了什麼嗎？

來源

2016-02-13 Jivan

原始的iPhone屏幕寬度（像素）是768px，即使iphone 6s仍然是從這個縮放。因此，設備比x2意味着屏幕上的全寬css元素爲css像素中的screenwidth/2。

我們爲什麼要那樣做？因爲這意味着一個X釐米寬的屏幕在CSS中總是Y像素寬度。

我不知道在未來增加密度顯示會發生什麼。對於8k屏幕使用1080px css是沒有意義的。也許命名將從px更改爲更類似於android應用程序中的dp。

來源

2016-02-13 18:54:05 seahorsepip

我終於找到了我不得不在<head>補充一點：

<meta name="viewport" content="width=device-width, initial-scale=1">

現在一切工作正常。

來源

2016-02-13 19:11:55 Jivan

iPhone需要媒體查詢的最小寬度：768px

回答

相關問題