混淆视口配置

我想创建一个简单的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

混淆视口配置

回答

相关问题