Media Queries - iOS Devices - html

Question

I'm trying to design a web page I have to be responsive based upon the type of device being used.
In trying this I've been trying to get it to respond differently from an iPhone to an iPad to a desktop.
The second and last have worked fine. But trying to get it to resize the way I want on an iPhone seems like it just doesn't want to do it.
/* iPhone Query */
#media only screen and (min-width : 375px) and (max-width : 667px) and (-webkit-min-device-pixel-ratio:2){
body{
margin: 0;
padding: 0;
width: 100%;
}
section.display{
width: 90%;
margin-left: auto;
margin-right: auto;
}
form {
-webkit-appearance: none;
}
form.logout-form button {
/* Size and position */
width: 100%;
height: 100%;
margin-top: -1px;
/* Icon styles */
font-size: .75em;
line-height: 75em;
color: white;
/* Styles */
border: none; /* Remove the default border */
-webkit-border-radius: inherit;
-moz-border-radius: inherit;
border-radius: inherit;
background: linear-gradient(#52cfeb, #42A2BC);
box-shadow:
inset 0 0.0625em 0 rgba(255,255,255,0.3),
0 0.0625em 0.125em rgba(0,0,0,0.35),
inset 0 0.1875em 0.125em rgba(255,255,255,0.2),
inset 0 -0.1875em 0.125em rgba(0,0,0,0.1);
cursor: pointer;
-webkit-appearance: none;
}
section.item{
width: 100%;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
float: left;
margin-top: 2.5%;
}
img{
width: 100%;
}
}
body{
margin: 0;
padding: 0;
width: 100%;
}
.main{
background-color: white !important;
left: 0;
width: 100%;
}
.display{
width: 70%;
background-color: white !important;
margin-left: auto;
margin-right: auto;
}
.item{
width: 30%;
border: 1px solid black;
margin-left: 3%;
float: left;
margin-top: 2.5%;
}
.logout{
width: 100%;
text-align: right;
border-bottom: 1px solid black;
padding-bottom: 1em;
}
.welcome{
margin-top: -1.9em;
margin-right: 5.4em;
}
.header{
margin: 0 0;
width: 100%;
background-color: #42A2BC;
}
.title{
width: 100%;
}
h1{
font-family: 'Lato', Calibri, Arial, sans-serif;
margin: 0;
padding-top: .75em;
padding-left: 1em;
color: white;
font-size: 2em;
}
img{
width: 100%;
}
p{
margin-left: 1em;
}
h2{
font-family: 'Lato', Calibri, Arial, sans-serif;
padding-left: .75em;
padding-right: .75em;
}
table{
margin-left: 1em;
}
td{
font-family: 'Lato', Calibri, Arial, sans-serif;
}
tr.spacerow > td{
padding-top: .5em;
}
td.last{
padding-bottom: .5em;
}
.colinfo{
padding-left: 1em;
}
.price{
width: 50%;
text-align: center;
float: right;
background-color: #42A2BC;
display: table-cell;
vertical-align: top;
position:relative;
}
.lowerfeatures{
width: 100%;
background-color: #42A2BC;
overflow: hidden;
}
.edit{
width: 50%;
float: left;
text-align: center;
background-color: #42A2BC;
}
.edithl {
color: white;
text-decoration: none;
}
.edithl:hover{
text-decoration: underline;
}
ul.menu {
list-style-type: none;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.menu li{
display: inline;
margin: 0 2em;
}
li a{
text-decoration: none;
color: #42A2BC;
}
li a:hover{
padding-bottom: 5px;
border-bottom: 1px solid #000;
}
nav{
width: 100%;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.logout-form button[type=submit]:focus {
outline: none;
}
.logout-form .submit {
/* Size and position */
width: 2.1875em;
height: 2.1875em;
position: absolute;
top: 0em;
right: 1.5em;
padding: 0.625em;
z-index: 2;
/* Styles */
background: #ffffff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
box-shadow:
0 0 0.125em rgba(0,0,0,0.1),
0 0.1875em 0.125em rgba(0,0,0,0.1),
inset 0 -0.1875em 0.125em rgba(0,0,0,0.2);
}
.logout-form .submit:after {
/* Size and position */
content: "";
width: 0.625em;
height: 0.625em;
position: absolute;
top: -0.125em;
left: 1.875em;
/* Styles */
}
.logout-form button {
/* Size and position */
width: 100%;
height: 100%;
margin-top: -1px;
/* Icon styles */
font-size: 1.4em;
line-height: 1.75em;
color: white;
/* Styles */
border: none; /* Remove the default border */
-webkit-border-radius: inherit;
-moz-border-radius: inherit;
border-radius: inherit;
background: linear-gradient(#52cfeb, #42A2BC);
box-shadow:
inset 0 0.0625em 0 rgba(255,255,255,0.3),
0 0.0625em 0.125em rgba(0,0,0,0.35),
inset 0 0.1875em 0.125em rgba(255,255,255,0.2),
inset 0 -0.1875em 0.125em rgba(0,0,0,0.1);
cursor: pointer;
}
.logout-form button:hover,
.logout-form button[type=submit]:focus {
background: #52cfeb;
transition: all 0.3s ease-out;
-webkit-appearance: none;
}
.logout-form button:active {
background: #42A2BC;
box-shadow:
inset 0 0 0.3125em rgba(0,0,0,0.3),
inset 0 0.1875em 0.250em rgba(0,0,0,0.3);
-webkit-appearance: none;
}
It all resizes fine in my web browser BUT when I go to the iPhone itself it won't resize until I set min-width to 980px.
Can anyone offer some advice as to whats going wrong?

Answer 1

You need to add <meta name="viewport" content="width=device-width, initial-scale=1"> to the <head> section of your html code.