我遇到了同样的问题：如何使我的网站宽度完全适合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 */我的网页
<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忽略了媒体查询。
任何帮助真的很感激，谢谢:)
将
shrink-to-fit=no添加到meta-tag内容属性中。这应该可以修复此行为。