Having trouble with responsive web design (RWD) on iPhones? Despite everything working fine on Chrome, Android, and Windows Phone, it seems like iPhones are causing chaos by ignoring the media query tags. What could be causing this issue?
In the head section of my code, I have included the following tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">I've also experimented with
@media only screen
@media min-device-widthBut to no avail. Here's the complete code snippet:
@media screen and (min-width: 220px) and (max-width: 480px)
{
html
{
height: 100%;
}
#header .saturn
{
width: 100%;
margin-top: 35px;
display: block;
text-align: center;
animation: rwdScaleSaturn 2s linear infinite;
-webkit-animation: rwdScaleSaturn 2s linear infinite;
transform: scale(0.8);
-webkit-transform: scale(0.8);
}
// Other CSS rules for different elements go here...
}