媒体查询不适用于iPhone 4 / 4S

Question

我的代码如下。我的问题是无论我在iPhone 4 / 4S的媒体查询中输入什么，它都不会应用这些更改。它只是保持原样。所以不适应屏幕尺寸。我现在已经尝试了一个小时但仍然没有结果。

我一直在使用此网站进行测试：http://quirktools.com/screenfly/

＆＃13;

＆＃13;

body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('img/tape-measure.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    color: #000305;
    font-size: 87.5%;
    font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
    line-height: 1.5;
    text-align: left;
}

a {
    text-decoration: none;
    
}

a:link, a:visited {
    color: #CF5C3F;
}

a:hover, a:active {
    background-color: #CF5C3F;
    color: #fff;
}

.body {
    margin: 0 auto;
    width: 70%;
    clear: both;
}

.mainHeader img {
    position: relative;
}

.mainHeader img.Logo {
	position: absolute;
	right: 15%;
	top: 74.5%;
	max-width: 20%;
	height: auto;
}

.mainHeader img.Margrit {
	position: absolute;
	right: 15%;
	top: 15%;
	max-width: 20%;
	height: auto;
    margin-bottom: 100px;
}

.mainHeader img.Couture {
	position: absolute;
    left: 10%;
    top: 5%;
	max-width: 100%;
	height: auto;
}

.mainHeader nav {
    background-color: #9cb34f;
	height: 40px;
	margin-top: 15px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainHeader nav ul {
    list-style: none;
    margin: 0 auto;
}

.mainHeader nav ul li {
    display: inline;
    float: left;
}

.mainHeader nav a:link, .mainHeader nav a:visited {
    color: #fff;
    display: inline-block;
    padding: 10px 25px;
    height: 20px;
}

.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, mainHeader nav .active a:visited {
    background-color: #CF5C3F;
    text-shadow: none;
}

.mainHeader nav ul li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainFooter {
    position: relative;

    width: 100%;
    height: 40px; 
    
    clear: both;
    text-align: left;
    
    background-repeat: no-repeat;

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #9cb34f;
    margin-top: 98%;
    margin-bottom: 2%;
    padding-top: 1px;
}

.mainFooter p {
    width: 100%;
    margin-left: 20px;
    color: #fff;
}


/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
      .body {
		width: 90%;
		font-size: 95%;
	}

	  .mainHeader img.Margrit {
		right: 5%;
		top: 45%;
	}

	  .mainHeader img.Logo {
		right: 5%;
		top: 70%;
	}

	  .mainHeader img.Couture {
		top: 20%;
		left: -15%;
	}

	  .mainHeader nav {
		height: 160px;
	}

	  .mainHeader nav ul {
		padding-left: 0;
	}

	  .mainHeader nav ul li {
		width: 100%;
		text-align: center;
	}

	  .mainHeader nav a:link, .mainHeader nav a:visited {
		padding: 10px 25px;
		height: 20px;
		display: block;
	}

	  .mainFooter {
		width: 100%;
	}
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}


/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}


/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}

＆＃13;

<!DOCTYPE html>
<html lang="de">
    <head>
		<title>Couture Anni</title>
		<meta charset="utf-8">
		
        <link rel="stylesheet" type="text/css" href="resources/css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body class="body">
		<header class="mainHeader">
			<img class="Logo" src="resources/img/Content%255Cvariation_800_e.png" alt="Logo">
			<img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">
			<img class="Couture" src="resources/img/Content_variation_800_g.png" alt="Couture Anni">
			
			<nav>
				
				<ul>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
				
		    </nav>
		</header>
		
		
        
        <footer class="mainFooter">
            <p>Copyright &copy; <a href="#" title="couture-anni">couture-anni.ch</a></p>
        </footer>
        
    </body>


</html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

HTML和CSS的

Here is a fiddle;媒体查询可以正常工作。 （在IE11中使用默认三星浏览器和台式电脑的三星Android智能手机进行了测试。）

如果它适用于你的小提琴而不是你的QuirkTools页面，那么该页面可能存在问题，或者CSS的链接方式可能存在问题。

请注意，iPhone /纵向查询是唯一会实际更改内容的内容 - 任何不适合该查询的设备（如下所示）都将使用默认的CSS设置。

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {