I'm trying to teach myself how to make a mobile version of a website, so I started off with something basic.
I have the following code
<body>
You are using...
<p class="mobile">
Mobile
</p>
<p class="desktop">
Desktop
</p>
</body>
with the CSS
@media screen and (max-width: 480px)
{
p.desktop {
display:none;
}
}
p.mobile {
display:none;
}
Basically, I want either "mobile" or "desktop" to display depending on which device you're using. When I navigate to the site on my desktop it says "desktop", so that seems fine. But when I do so on my iPhone it still says desktop.
I have tried increasing the max-width to 640px which is the iPhone 4S' resolution. But I still have no luck. What am I doing wrong?