html - 媒体查询 - 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">到 <head>您的 html 代码部分。