css - Confuse Viewport Config -

i'm trying create simple css responsive layout , in computer seems fine. when access phone (nokia 710) elements bigger normal.

here's have:

<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 screen , (max-width : 320px) {   li { width: 0.5vw; height: 0.5vw; background-color: red; } } 

with code, in phone layout works fine. debugging on chrome device elements small.

this should simple layout , don't i'm doing wrong.

here's codepen: http://codepen.io/rochapablo/full/eajxzp/

and browser: mozilla/5.0 (compatible; msie 9.0; windows phone os 7.5; trident/5.0; iemobile/9.0; nokia; lumia 710)

update

i don't why using vw width of devices different. i've tried % , worked. i'm not 100% satisfied have worked in devices same same code.

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; } 

your width , height values using viewport width (vw) , height (vh) values no minimums set.

this cause elements become infinitely small in relation viewport size.

i recommend adding in min-width , min-height values li elements.

e.g.

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