css - 混淆视口(viewport)配置

Question

我正在尝试创建一个简单的 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 设备上调试元素太小了。

这应该是一个简单的布局，不要理解我做错了什么。

这是我的代码笔:http://codepen.io/rochapablo/full/EaJxZP/

浏览器:Mozilla/5.0(兼容；MSIE 9.0；Windows Phone OS 7.5；Trident/5.0；IEMobile/9.0；NOKIA；Lumia 710)

更新

我不明白为什么使用 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; }

Answer 1

您的宽度和高度值使用的是未设置最小值的视口(viewport)宽度 (vw) 和高度 (vh) 值。

这将导致您的元素相对于视口(viewport)大小变得无限小。

我建议为您的 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; 
  }
}