缩小网站以适应 iPhone 和 iPad 的宽度答案

【问题标题】：Shrink website to fit width of iPhone and iPad缩小网站以适应 iPhone 和 iPad 的宽度
【发布时间】：2016-05-10 15:10:35
【问题描述】：

我遇到了同样的问题：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 却忽略了媒体查询

非常感谢任何帮助，谢谢:)

【问题讨论】：

标签： html ios css iphone ipad

【解决方案1】：

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

【讨论】：