混淆視口配置

我想創建一個簡單的CSS響應佈局，並在我的電腦一切似乎很好。但是當我通過我的手機（諾基亞710）訪問時，元素變得比正常情況更大。混淆視口配置

這是我有：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> 

html, body, ul, li { margin: 0; padding: 0; } 
body, input, select { font-family: Arial; font-size: 0.800em; } 
li { float: left; display: inline; margin: 1px; background-color: #d9d9d9; text-align: center; overflow: hidden; } 

li { width: 5vw; height: 5vw; background-color: #aaa; } 

@media only screen and (max-width : 320px) { 
    li { width: 0.5vw; height: 0.5vw; background-color: red; } 
}

有了這個代碼，在我的手機佈局工作正常。但在Chrome設備上調試時，元素太小。

這應該是一個簡單的佈局，並不明白我做錯了什麼。

這裏是我的codepen：http://codepen.io/rochapablo/full/EaJxZP/

和瀏覽器：的Mozilla/5.0（兼容; MSIE 9.0; Windows手機OS 7.5;三叉戟/ 5.0; IEMobile/9.0; NOKIA;的Lumia 710）

UPDATE

我不明白爲什麼使用vw寬度的設備是不同的。所以我試過％並且工作。我不是100％滿意，但是這在所有具有相同代碼的設備上都能正常工作。

li { width: calc(100%/4 - 2px); height: 50px; line-height: 50px; } 
li:nth-child(1) { width: calc(100%/4 - 2px); height: 102px; line-height: normal; text-align: left; } 
li:nth-child(4) { width: calc(100%/4 - 2px); height: 50px; } 
li:nth-child(5) { width: calc(100%/2 - 2px); height: 50px; }

來源

2015-03-31 Pablo

您的寬度和高度值使用未設置最小值的視口寬度（vw）和高度（vh）值。

這將導致您的元素相對於視口大小變得無限小。

我會建議爲您的li元素添加min-width和min-height值。

例如

@media only screen and (max-width : 320px) { 
    li { 
    width: 0.5vw; 
    height: 0.5vw; 
    min-width:200px; /** ADDED **/ 
    min-height:200px; /** ADDED **/ 
    background-color: red; 
    } 
}

來源

2015-03-31 19:18:11 xengravity

對！看着這一點。但爲什麼在模擬和移動設備上不一樣？既然都是一樣的大小？ – Pablo 2015-03-31 19:27:35

要確認您是否意識到您的桌面視圖的li元素設置爲5vw，而您的手機只有.5vw？這是相當大的差異，並會使移動版本更小。 – xengravity 2015-03-31 19:29:13

是的，我意識到。順便說一下，它應該在5vw上同時運行媒體，對吧？ – Pablo 2015-03-31 19:34:29

混淆視口配置

回答

相關問題