媒體查詢 - iOS設備

Question

我試圖設計一個網頁，我必須根據所使用設備的類型進行響應。

在嘗試此操作時，我一直試圖讓它以不同的方式響應iPhone到iPad到桌面。

第二次也是最後一次工作正常。但試圖讓它調整我想要在iPhone上的方式似乎只是不想這樣做。

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

這一切在我的網頁瀏覽器調整罰款，但是當我去iPhone本身，它不會調整，直到我設置最小寬度980px。

任何人都可以提供一些建議，以什麼出錯？

Answer 1

您需要將<meta name="viewport" content="width=device-width, initial-scale=1">添加到您的html代碼的<head>部分。