Reponsive CSS iOS7 not working

Question

http://franquicia.dia.es/

I try all of these codes, iPhone 4 with iOS7:

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

<!-- <meta name="viewport" content="initial-scale=1, maximum-scale=1" /> -->
<!-- <meta name="viewport" content="initial-scale=1, minimum-scale=1.0, maximum-scale=1.0"> -->
<!-- <meta name=”viewport” content=”initial-scale=1″> -->
<!-- <meta name="viewport" content="width=device-width; height=device-height;"> -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<!-- <meta name="viewport" content="minimum-scale=1, initial-scale=1"> -->
<!-- <meta content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, width=device-width" name="viewport" /> -->
<!-- <meta name="viewport" content="initial-scale=1"> -->
<!-- <meta name="viewport" content="initial-scale=1.0" /> -->
<!-- <meta name="viewport" content="width=device-width"> -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> -->
<!-- <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" /> -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" /> -->
<!-- <meta name="viewport" content="width=device-width,maximum-scale=1.0" /> -->
<!-- <meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=yes" /> -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> -->
<!-- <meta name="viewport" content="initial-scale=2.3, user-scalable=no"> -->
<!-- <meta name="viewport" content="width=device-width"> -->
<!-- <meta name="viewport" content="width=device-width"> -->
<!-- <meta name="viewport" content="maximum-scale=5.0, user-scalable=no"> -->
<!-- <meta name = "viewport" content = "user-scalable=no, width=device-width"> -->
<!-- <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0"/> -->

Nothing change in iOS7, not working at all. Why?

Answer 1

Looking at your CSS the viewport is not your problem. The viewport meta tag merely tells the device how to modify the display of the browser, but does not actually change any of your website. With responsive design these css properties are your best friend:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
max-width: 100%;

In your css you are telling some elements to be a width of 320px, but not limiting their width. Also, the box-sizing property tells the elements to size using both the width and the padding and the borders, which helps with overflow problems.

Here is what your site looks like after adding max-width: 100%; to a bunch of the elements on your page.