I am having the same issue as this: How can I make my website width fit fully on iphone 5?
I have added my media queries and it sort of works on an iPhone but the iPad is cropped so only about 75% of the width can be seen. Can anyone see any errors with my coding which might cause the iPad to ignore the media queries?
I have this within the head
<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
My 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 */My 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>It just seems odd that iPhone tries to shrink the site, however iPad ignores the media query
Any help really appreciated, thanks :)
