Question

我遇到与此相同的问题：How can I make my website width fit fully on iphone 5?

我添加了我的媒体查询，它在iPhone上有效，但iPad被裁剪，因此只能看到宽度的75％左右。任何人都可以看到我的编码有任何错误，可能导致iPad忽略媒体查询？

我在头脑中有这个

<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">

我的CSS

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
  /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  /* Styles */
}

	
#container1 {
	width:1100px;
	margin:auto;
	}

.image { 
	margin:auto;
	position: relative; 
	width: 100%; /* for IE 6 */

我的HTML

<body bgcolor="#e6ebe4">

<div id="container1">
	
	<div class="image">
	<img src="images/background.png" width="1100px" height="784px" name="background"/>
	<h4>
	<a href="aboutus.html">ABOUT US</a>
	<br />
	<a href="images.html">IMAGES</a>
	<br />
	<a href="howitworks.html">HOW IT WORKS</a>
	<br />
	<a href="pricing.html">PRICING & PRODUCTS</a>
	<br />
	<a href=" ">BLOG</a>
	<br />
	<a href=" ">PRESS</a>
	<br />
	<a href="contact.html">CONTACT US</a>
	<br />
	<br />
	<a href="https://www.instagram.com/p/9tu8hgATFP/"><img src="images/insta.png" width="50px" height="50px" name="dot"/></a>
	</h4>
	</div>
	
</div>


</body>

iPhone试图缩小网站似乎很奇怪，但iPad忽略了媒体查询

任何帮助都非常感谢，谢谢：）

Answer 1

将shrink-to-fit=no添加到您的meta-tag内容属性中。这应该可以解决这个问题。

的

收缩网站以适应iPhone和iPad的宽度

1 个答案: